UGC Techdocs
  • Introduction
  • Guides
    • Analytics
      • Tracking UGC on Adobe Analytics
      • Tracking Widget interactions with Google Analytics
    • Direct Uploader
      • How to add Custom Data to Direct Uploader
      • How to capture Custom Data on Direct Uploader
      • How to automatically tag data on Direct Uploader
      • How to Customize error messages on Direct Uploader
      • How to Track Direct Uploader form submissions with Google Analytics (Universal & GA 4)
    • Data Templates
      • Creating a Data Template
    • Rights via Registration
      • Capture Custom Data on Rights by Registration Form
      • Styling Rights via Registration Form
    • REST API
      • Caching REST API results for optimization
      • Posting content into Nosto via Tile API
      • Posting images into Nosto via Tile API
    • Onsite Widgets (2.0)
      • Blank Canvas
        • How to Use the Blank Canvas to Create a Twitter Count Widget
        • Creating an Auto-Scrolling Carousel using Blank Canvas
        • Creating Gallery Widget by Using the Blank Canvas Widget
        • Creating a simple Hover effect using Blank Canvas
        • Creating a Word Cloud using Blank Canvas
        • Creating Your Widget by Using the Blank Canvas
      • Bind your own Events
      • Creating a Grid Widget from Waterfall
      • Create a Q&A Widget using Data Templates
      • Displaying a Widget in a Mobile App
      • Dynamically Specify Products to Display in Widget
      • Dynamically specify what Tile to display in a Widget
      • How to add a title / subtitle to a widget
      • How to localize the load more button on widgets
      • How to overlay existing Google Map with the UGC Map Widget
      • How to use Filter and search in a Widget
      • How to change click on inline tile behaviour to redirect to PDP in a Widget
      • Styling cross-sellers on Grid and Carousel Widgets
      • How to Load External JS and CSS into Widgets
      • Profiling Widget Performance
      • Re-targeting with Widgets and Facebook Pixel
      • Render Widget filters dynamically
      • Styling Carousel Widget
      • Styling Grid Widget
      • Styling Masonry Widget
      • Styling Waterfall Widget
      • Styling Widget Expanded Tile
      • Styling Widget Shopspots
      • Using Web Fonts in Widgets
    • Digital Screens
      • Customizing Carousel Event Screen
      • Customizing Mosaic Event Screen
      • Customizing Scrollwall Event Screen
      • Customizing the Mosaic Event Screen to Have 9 Even Tiles
    • Email
      • Adding Location to an Email Tile
      • Styling the Email Widget
    • Integrations
      • DoubleClick
        • UGC Ads with Nosto and Google DoubleClick
      • Zapier
        • Consuming UGC Webhooks via Zapier
      • Mailchimp
        • Bring Social Content into a Mailchimp Campaign
    • Webhooks
      • Trigger notifications when content is in the moderation queue
  • Widgets
  • API Docs
    • JavaScript API
      • Widgets
        • Introduction
        • API Reference for Content Widgets
        • API Reference for Blank Canvas
        • API Reference for Map Widget
      • Digital Screens
        • Introduction
        • API Reference
    • Content API
      • Reference
    • REST API
      • Reference
        • Filters API
        • Moderation Views API
        • Tags API
        • Terms API
        • Tiles API
        • Users API
        • Widgets API
        • Automation Rules API
        • REST API Reference Widgets style and config
      • Best Practices
    • Webhooks
  • Enterprise Tools
    • Automation Rules
      • Triggers
      • Actions
      • Samples
    • Data Templates
    • User Access Control (UAC)
    • Single Sign On (SSO)
    • Enterprise Admin User Interface (EAUI)
    • Zapier
  • Commerce Tools
    • Product Feeds
    • Widget Implementation
    • Reporting
    • Integrations
      • Google Tag Manager
      • Magento
      • SalesForce Commerce Cloud
      • Shopify
      • Shopify Add To Cart
        • Global Variant Mapping for Add to Cart
        • Customise Add to Cart Widget Experience
  • Analytics
    • Google Analytics 4
      • Getting Started
      • Widgets Events
      • E-commerce Events
      • Email Events
  • Terms of Use
Powered by GitBook
On this page
  • Overview
  • Step 1 - Load Fonts
  • Via the Custom CSS
  • Via the Custom JavaScript
  • Step 2 - Use Fonts
  • Sample
  • Inline Tile Custom JavaScript
  • Inline Tile Custom CSS
  • Expanded Tile Custom CSS
  • Widget with Customised Web Fonts

Was this helpful?

  1. Guides
  2. Onsite Widgets (2.0)

Using Web Fonts in Widgets

PreviousStyling Widget ShopspotsNextDigital Screens

Was this helpful?

Overview

This article will instruct you on how to use web fonts from different providers such as , , or .

Step 1 - Load Fonts

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.

Via the Custom CSS

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.

Via the Custom JavaScript

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.

Tips - Enabling Web Fonts

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.

What's the Differences?

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.

WebFontConfig = {
    // other options and settings...
    active: function() {
        sessionStorage.font = true;
    }
}

Step 2 - Use Fonts

After loading fonts properly, all you need to do is add the font name to your CSS styles. For example:

Sample

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.

Inline Tile Custom JavaScript

Here we specify how to use the "Open Sans Condensed" font from Google and a TypeKit kit containing the "Industry" font.

WebFontConfig = {
    google: {
        families: [
            'Open+Sans+Condensed:300:latin'
        ]
    },
    typekit: {
        id: 'YOUR KIT ID'
    },
    active: function() {
        sessionStorage.font = true;
    }
};

Note that TypeKit is a paid service, you need to register by yourself and use it on Nosto's UGC widgets.

Inline Tile Custom CSS

.tile-user {
    font-family: 'Open Sans Condensed', sans-serif;
}
.tile-caption {
    font-family: 'industry', sans-serif;
}

Expanded Tile Custom CSS

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.

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Rajdhani);

.stacklapopup-user-info {
    font-family: 'Open Sans Condensed', sans-serif;
}
.stacklapopup-caption {
    font-family: 'Rajdhani', sans-serif;
}

Currenly we don't provide the Web Font Loader in the Expanded Tile. You can only load the Web Fonts from CSS @import.

Widget with Customised Web Fonts

<script type="text/javascript">(function (d, id) { if (d.getElementById(id)) return; var t = d.createElement('script'); t.type = 'text/javascript'; t.src = '//assetscdn.stackla.com/media/js/widget/fluid-embed.js'; t.id = id; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(t); }(document, 'stackla-widget-js'));</script>

For more information, check the official repository. We also recommend you to read the article on the website.

Web Font Loader
Loading Web Fonts with the Web Font Loader
CSS-Tricks
Google
Typekit
Fonts.com
Fontdeck
Overview
Step 1 - Load Fonts
Via the Custom CSS
Via the Custom JavaScript
Tips - Enabling Web Fonts
What's the differences
Step 2 - Use Fonts
Sample