TL;DR

• Installiere @beyonk/google-fonts-webpack-plugin

npm i -D @beyonk/google-fonts-webpack-plugin

• Stelle das Plugin bereit (z.B.: webpack.config.js):

const Encore = require('@symfony/webpack-encore');
const GoogleFontsPlugin = require("@beyonk/google-fonts-webpack-plugin");

[...]

Encore
    .addPlugin(new GoogleFontsPlugin({
        fonts: [
            { family: 'Mulish' },
            { family: 'Poppins' },
        ]
    }))
;

[...]

• Beispiel: Github.

Google Fonts Webpack Plugin

Mit der Hilfe des google-fonts-webpack-plugin werden Schriften von so genannten Google Fonts Helpers heruntergeladen.

Google Fonts Helper sind Umgebungen um Google Fonts selbst zu hosten.

Und ja Google liefer auch einen Google Fonts Helper.

Leider wurde das Webpack Plugin seit einer Weile nicht erneuert.

Zum Glück gibt es den Fork @beyonk/google-fonts-webpack-plugin.

An sich ist das Webpack Plugin recht simple. Es stellt für jede gewünschte Schrift Anfragen an einen google-webfonts-helper.

Wird die Schrift gefunden, wird sie samt Varianten und Formaten in einen lokalen Ordner geladen.

Wir können Varianten, Formate, lokale Ordner Namen so wie google-webfonts-helper einstellen.

Hier eine Übersicht der Einstellungen.

Merken wir uns, das Webpack Plugin kann Dinge herunterladen. Optional können wir Dinge einstellen, um den Prozess zu verfeinern.

Installiert wird das Plugin:

npm i -D @beyonk/google-fonts-webpack-plugin

Google Fonts mit Webpack.Encore herunterladen

• Öffne deine webpack.config.js.
• Require das Plugin:

const GoogleFontsPlugin = require("@beyonk/google-fonts-webpack-plugin");

• Nun stelle das Plugin in Webpack bereit:

Encore
    .addPlugin(new GoogleFontsPlugin({
        formats: ['woff2'],
        fonts: [
            { family: 'Mulish' },
            { family: 'Poppins', variants: ['regular', "800"]  },
        ]
    }))
;

In Fonts schütten wir Google Fonts rein. Es wird mindestens eine Familie erwartet. Optional können wir Varianten (regular, italic, 800), Subsets (Latin, Greek, …) oder Formate (eot, woff, woff2, ttf, svg) überschreiben.

Sobald nun Webpack anfängt Dinge zu tun, werden die Schriftarten Mulish und Poppins in den lokalen Asset Ordner unter fonts geladen.

Dadurch das Webpack immer Schriften herunterlädt ist das Entwickeln langsam.

Wir warten halt immer bis alle Schriften verfügbar sind.

Alternativ laden wir Schriften nur, wenn Production gebundelt wird. Dafür passen wir unser Snippet an:

if (Encore.isProduction()) {
    Encore
        .addPlugin(new GoogleFontsPlugin({
            formats: ['woff2'],
            fonts: [
                { family: 'Mulish' },
                { family: 'Poppins', variants: ['regular', "800"]  },
            ]
        }))
    ;
}

Wenn wir jetzt das Projekt einmal aufsetzen, einmal Produktion laufen. Schon Schriften und die gewohnte Performance verfügbar.

Fonts konsumieren

Google Fonts Webpack Plugin stellt uns eine css bereit.

Sobald wir diese Datei einbinden werden die heruntergeladenen Schriften im Browser verfügbar.

<link rel="stylesheet" href="/assets/fonts/fonts.css">

Also können wir die Schriftarten wie gewohnt in CSS, SCSS, … nutzen.

p {
    font-family: 'Poppins', 'Mulish', 'sans-serif';
}

Kudos

Big thanks to:

• gabiseabra@github and all google-fonts-webpack-plugin contributors for being awesome.
• And beyonk-adventures@github for forking and maintaining google-fonts-webpack-plugin.