Michael_K: Schriften direkt in HTML einbetten

SELF-Forum

Schriften direkt in HTML einbetten

Michael_K
– Informationen zu den Bewertungsregeln

Hallo,

man kann ja in HTML eigene Schriften einbetten. Aber so wie ich es gelesen habe, wird auf "externe" Quellen verwiesen. Ist es möglich, eine Schrift in den Quellcode einzubinden, so dass es ein HTML-Dokument bleibt? Beispiel: Man kann ja bei HTML auch ein Bild mit Base64-Kodierung in das Dokument einbinden und benötigt somit keine Referenz auf eine externe Datei. Ist das auch mit Schriften möglich? Wenn ja, gibt es eine Quelle, wo man es nachlesen kann?

Danke und Gruss

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Schriften direkt in HTML einbetten

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Lieber Michael_K,

    Du möchtest also in Deinem HTML-Dokument einen <style>-Bereich, in dem Du für das body-Element mittels @font-face eine Schriftart einbinden möchtest, unter Verwendung eines Data-URL.

    Was hast Du schon probiert, und was liefert nicht das erwartungsgemäße Ergebnis?

    Liebe Grüße,

    Felix Riesterer.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. 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