Using Web Fonts in Widgets
Was this helpful?
Was this helpful?
This article will instruct you on how to use web fonts from different providers such as , , or .
You will need to download the font files before using them. Let's take a look at some different approaches to load fonts onto our web page.
The easiest way to use Web Fonts is via the CSS @import statement. You can get the required CSS code from the mentioned providers and paste it into Nosto's UGC Custom CSS Code Editor.
Let's take a look at Google Fonts as an example. After you select the fonts you need, you can go to the Use page and get the required code from the @import tab.
Paste the code into the Nosto's UGC Custom CSS Editor.
An alternative way to load font files is via Javascript. Let's take a look at Google Fonts as an example again.
Paste the code into the Nosto's UGC Custom JavaScript Editor. Please note the <script/>
tags must be removed.
By enabling the Web Fonts option in Appearance tab, you just need to configure the WebFontConfig
global variable without loading the Web Font Loader library manually.
Note the Web Fonts config option currently is only available in Waterfall, Carousel, and Vertical Fluid widgets. And it only affects the inline tiles, not the expanded tile.
You may wonder why we need the more complicated JavaScript method. This is because the Web Font Loader gives us additional control. The following code snippet illustrates minimizing the flash of styled text by setting sessionStorage
.
After loading fonts properly, all you need to do is add the font name to your CSS styles. For example:
In the following example, we are going to use the Custom Javascript editor to load multiple web fonts from different font providers. Note that we have enabled the Web Fonts option in the Appearance tab. We have also enabled sessionStorage to avoid the flash issue.
Here we specify how to use the "Open Sans Condensed" font from Google and a TypeKit kit containing the "Industry" font.
Note that TypeKit is a paid service, you need to register by yourself and use it on Nosto's UGC widgets.
To demonstrate the Expanded Tile Custom CSS we've used the CSS @import method to load the "Open Sans Condensed" and "Rajdhani" fonts from Google Fonts.
Currenly we don't provide the Web Font Loader in the Expanded Tile. You can only load the Web Fonts from CSS @import.
For more information, check the official repository. We also recommend you to read the article on the website.