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:
@font-face {
font-family: "Montserrat";
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(/AppName/Montserrat-LightItalic.ttf) format("truetype");
}
@font-face {
font-family: "Montserrat";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/AppName/Montserrat-Italic.ttf) format("truetype");
}
@font-face {
font-family: "Montserrat";
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(/AppName/Montserrat-SemiBoldItalic.ttf) format("truetype");
}
@font-face {
font-family: "Montserrat";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(/AppName/Montserrat-BoldItalic.ttf) format("truetype");
}
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/AppName/Montserrat-Light.ttf) format("truetype");
}
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/AppName/Montserrat-Regular.ttf) format("truetype");
}
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/AppName/Montserrat-SemiBold.ttf) format("truetype");
}
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/AppName/Montserrat-Bold.ttf) format("truetype");
}
Make sure to replace AppName with the actual name of your application.
Picking the Right Font Format
Depending on the browser, different font formats are supported. Here’s a quick reference guide to the most common font formats:
filename.eot – format(’embedded-opentype’)
filename.woff2 – format(‘woff2’)
filename.woff – format(‘woff’)
filename.ttf – format(‘truetype’)
If your font package includes multiple formats, you can add them to your @font-face rule to ensure maximum compatibility across browsers.
Final Step: Remove the @import Line
Once you’ve successfully added and referenced your fonts, go back and remove the @import line that was previously pulling in the fonts from an external URL. This ensures your fonts are now fully self-hosted and cached for offline use.
Finally, ensure your theme is applying the font globally by using the following CSS:
html {
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
By following these steps, you can successfully resolve the font caching issue for PWAs in OutSystems. This solution ensures that your custom fonts are properly cached for offline use, enhancing the reliability and performance of your PWA.
Want to learn more valuable Dev Tips? Sign up for our newsletter and stay updated with the latest insights! Also, don’t forget to check out our upcoming OutSystems courses to scale your career.
