GoogleFonts

Nuggets allows you to incorporate Google-created fonts into your project.

Combined with the CustomCSS feature, you can easily change the fonts in the Storyline player.

How to use

The feature offers two embedding methods, depending on whether you want to use the <link> or the @import CSS rule offered by the Google Fonts API.

Whether you use one method or the other, the process is identical: once you have selected the fonts on the Google Fonts site, the API proposes a script on the right to be copied into the body of an HTML project, with a bold text.

google

Let's select the section in bold and copy it to the clipboard.

The incorporation of a font provided by Google is declared in the main initialisation trigger, like the other declarations made with the CustomCSS feature.

CSS incorporation

JavaScript
GoogleFonts.import('Roboto:ital,wght@0,400;0,700;1,400;1,700');

CustomCSS.newRule(`
    .caption p { 
        font-family: 'Roboto', sans-serif;
    }
`);

Incorporation Link

JavaScript
GoogleFonts.link('Inter:wght@400;700');

CustomCSS.newRule(`
    .caption p { 
        font-family: 'Inter', sans-serif;
    }
`);

PRACTICE


To indent CSS code and insert line breaks in strings without breaking the code, use the accent grave character instead of the apostrophe or the double quote. This is obtained by hitting twice the key at the top left, before the 1 on Qwerty keyboards, which inserts the opening and closing delimiters.

Test either method to see if they work for your project.

  • For an online project with no restrictions, both methods work equally well.
  • For an offline or blocked project, use the CustomCSS.newFontFace method.

Consult your IT department for more information.