Rolf B: Schriften direkt in HTML einbetten

Beitrag lesen

SELF-Forum

Schriften direkt in HTML einbetten

Rolf B (Versionen)
– Informationen zu den Bewertungsregeln

Hallo Michael_K,

das braucht viel Platz im HTML, und wenn Du mehrere Seiten hast, bringt jede ihren eigenen Haufen an Schriften mit.

Wenn Du beispielsweise Roboto von Google Fonts benutzt, dann wird die Schrift in 3 Stufen geladen.

  1. In deinem <head> Bereich schreibst Du
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

  2. Google liefert daraufhin eine kleine CSS Datei mit @font-face Definitionen. Kopiere einfach den href aus dem oben stehenden link-Element in die Adresszeile deines Browsers, dann siehst Du es. Diese Definitionen enthalten eine Kette von Quellen. Bei Roboto ist es z.B.
    local('Roboto'), local('Roboto-Regular'), url(...) format('woff2')
    Du kannst das <link> Element eliminieren, wenn Du die relevanten @font-face Definitionen direkt in dein CSS kopierst. Dann hast eine Ladestufe - und einen Google-Kontakt - weniger.

  3. Falls der Anwender Roboto als lokal installierte Schrift hat, findet nun kein weiterer Kontakt zum Netz statt. Wenn nicht, muss der Browser den Webfont als WOFF-Datei laden. An dieser Stelle kannst Du erneut einhaken, um den DSGVO-relevanten Google-Kontakt zu beseitigen. Du kannst die WOFF2-Datei auf deinen eigenen Server kopieren und die URL so ändern, dass sie von deinem Server geholt wird statt vom Google Server. Du kannst auch, wie Felix sagte, einen Data URL Generator verwenden (davon gibt es online etliche im Web), aus der WOFF-Datei eine Data-URL zu machen. Nachteil der Data-URL ist, dass sie eine base64-codierte Form der WOFF Datei enthält und damit 33% größer ist als das Original.

D.h. wenn es Dir um Privacy geht, kopiere die @font-face-Angaben und die woff-Datei(en) des Webfonts auf deinen Server. Beachte die Lizenzbestimmungen des Fonts beim Font-Anbieter, ggf. ist es nicht erlaubt. Oder deine Seite muss erkennbar darauf hinweisen, dass sie diesen Font nutzt.

Wenn es Dir darum geht, deine Webseite nicht auf mehrere Dateien zu verteilen (weshalb auch immer), dann ist die data-URL ein möglicher Weg. Aber schneller wird deine Seite dadurch nicht, und weniger Datenverbrauch hat sie auch nicht.

Rolf

--
sumpsi - posui - clusi
Beitrag melden
–
Informationen zu den Bewertungsregeln