Fonts in Drupal einbinden

Nachfolgenden 4 Varianten zum herauskopieren für Google extern (normal und variable Font), Adobe extern und lokale Fonteinbindung.

In der [themename].libraries.yml eine neue Library fonts erstellen und diese über [themename].info.yml laden.

• Google Code finden:
  Auf Google Fonts die gewünschte Schrift auswählen. Bei Roboto wählst du die benötigten Styles bzw. beim Variable Font die gewünschten Achsen/Bereiche. Google erzeugt dir unter «Get font» → «Get embed code» → «Web» den Einbindungscode.

  • fonts:
      css:
        theme:
    
          # 1. Google Fonts – Roboto, feste Schriftschnitte
          # Regular 400, Regular 700, Italic 400, Italic 700
          'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap':
            type: external
            minified: true
    
          # 2. Google Fonts – Roboto Variable > Unterschied nur im Range 300..900
          # Weight-Range 300–900, normal + italic
          'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300..900;1,300..900&display=swap':
            type: external
            minified: true
    
          # 3. Adobe Fonts – z. B. Proxima Nova
          # xxxxxxx durch die ID deines Adobe-Webprojekts ersetzen
          'https://use.typekit.net/xxxxxxx.css':
            type: external
            minified: true
    
          # 4. Lokal gehostete Fonts
          # @font-face-Definitionen stehen in dieser Datei
          css/fonts.css: {}

  • Für den lokalen Font in der fonts.css der bekannte Einbindungscode verwenden:

  • /* Light 300 */
    @font-face {
      font-family: "MyFont";
      src: url("../fonts/myfont-light.woff2") format("woff2");
      font-style: normal;
      font-weight: 300;
      font-display: swap;
    }
    
    /* Light 300 Italic */
    @font-face {
      font-family: "MyFont";
      src: url("../fonts/myfont-light-italic.woff2") format("woff2");
      font-style: italic;
      font-weight: 300;
      font-display: swap;
    }
    
    /* Medium 500 */
    @font-face {
      font-family: "MyFont";
      src: url("../fonts/myfont-medium.woff2") format("woff2");
      font-style: normal;
      font-weight: 500;
      font-display: swap;
    }