When developing a Progressive Web App (PWA) in OutSystems, you might run into a common warning message: “The URL ‘https://my-amazing-font’ will not be cached for offline usage.” If you’ve added a web font using @import, this issue could prevent your PWA from functioning optimally offline. But don’t worry – fixing this is simple. In this post, we’ll walk you through how to solve this problem in three easy steps. By the end, you’ll have your custom fonts cached and ready for offline use.
Why Is This Important?
PWAs are designed to work seamlessly both online and offline. Fonts imported via @import aren’t cached by default, meaning that when users go offline, the custom fonts will not load, potentially affecting the appearance and usability of your app. By self-hosting your web fonts and ensuring they are cached, you can ensure consistent user experience, both online and offline.
Step 1: Get the Font
The first step is to download your desired web font. There are several places to find fonts, with Google Fonts being one of the most popular. OutSystems UI generally uses font-weight 300, 400, 600, and 700, so it’s best to download these weights along with their italic versions if available. Not all fonts will include these specific styles, but don’t worry – if a style is missing, it will automatically fallback to a default.
Selecting Styles in Google Fonts
When choosing a font from Google Fonts, ensure you select all the required styles (normal, italic) and weights (300, 400, 600, 700) to match OutSystems UI’s needs.
Step 2: Add the Font to Resources
Once you’ve downloaded the font, unzip the file. Next, you’ll need to add it to the Resources folder in your OutSystems application. To do this, drag and drop all the font files into the Resources folder (note: you can’t drop files into a subfolder, so drop them directly into Resources).
Setting the Deploy Action
After adding the files, set the Deploy Action to “Deploy to target directory.” This will host the fonts publicly, allowing your application to reference them. Typically, you should add these fonts to the Theme module unless you have a dedicated Asset module for such resources.
Step 3: Add CSS to Your Theme
With the fonts now hosted in your application, it’s time to add some CSS to your theme to ensure proper usage of the fonts. Below is the sample code you can copy-paste into your theme’s CSS. Make sure to change the font-family name and URLs to match the fonts you’ve added: