GoogleFonts

Nuggets offre la possibilité d'incorporer les polices de caractères créées par Google dans votre projet.

Combiné avec la fonctionnalité CustomCSS, vous pouvez facilement changer les polices de caractères du lecteur Storyline.

Utilisation

La fonctionnalité propose deux méthodes d'incorporation, suivant que vous souhaitez utiliser <link> ou la règle CSS @import proposés par l'API de Google Fonts.

Que vous utilisiez l'une ou l'autre des méthodes, le processus est identique : une fois la sélection des polices effectuée sur le site de Google Fonts, l'API propose un script à droite à copier dans le corps d'un projet HTML, avec une partie en gras.

google

Sélectionnions la section en gras et copions-la dans le presse-papier.

L'incorporation d'une police de caractères proposée par Google est déclarée dans le déclencheur principal d'initialisation, comme les autres déclarations effectuées avec la fonctionnalité CustomCSS.

Incorporation CSS

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;
    }
`);

PRATIQUE


Pour indenter le code CSS et insérer des retours à la ligne dans les chaînes de caractères sans casser le code, utilisez le caractère accent grave à la place de l'apostrophe ou du guillemet anglais. Il s'obtient en combinant les touches Alt Gr et 7 deux fois sur les claviers Azerty, ce qui insère les délimiteurs ouvrant et fermant.

Testez l'une ou l'autre des méthodes pour savoir si elles fonctionnent sur votre projet.

  • Pour un projet en ligne sans restriction, les deux méthodes fonctionnent indifféremment.
  • Pour un projet hors-ligne ou bloqué, utilisez la méthode CustomCSS.newFontFace.

Consultez votre DSI pour avoir plus d'informations.