Schriften direkt in HTML einbetten

[Rolf B]

Hallo Linuchs,

also, gerade mal probiert (mit Roboto 400, latin only).

Du kannst die Fontdatei nehmen und mit unserem Helferlein base64 codieren. Das machst Du in der CSS-Variante, dann bekommst Du direkt ein Code-Snippet, wo url(data:...) steht. Unser Helferlein setzt ggf. nicht den richtigen MIME-Typ, den solltest Du auf font/woff2 anpassen (es scheint aber auch als octet-stream zu funktionieren).

Den url()-Teil der Helferlein-Ausgabe kopierst Du in die src-Eigenschaft der @fontface Regel.

Ich denke, das sollte auch mit TTF gehen. Wie groß ist deine Lato.TTF? Die Lato.WOFF2-Dateien von Google sind für Latin regular ca 20KB groß. Die Latin-Ext Erweiterung hat nochmal ca 5K.

Lato als WOFF2 bekommst Du bei Google-Fonts in Form dieses CSS-Files:

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Der erste Schritt wäre, zu prüfen, ob Du den latin-ext Teil brauchst (die erste @font-face Rule). Wenn nicht, hast Du schonmal 7,300KB gespart.

Im zweiten Schritt konvertierst Du die benötigten WOFFs in eine Data-URL und ersetzt die gstatic-URLs durch die Data-URL.

Wichtig scheint nur, dass die format()-Angabe hinter der url() steht. Ich wollte das "aus lesbarkeitsgründen" vertauschen, und dann nimmt er die @font-face Regel bei mir nicht. Seltsam…

Wenn Dir die Lato.WOFF2 immer noch zu groß ist, such nach einem WOFF2-Fonteditor und schmeiß die nicht benötigten Glyphen raus.

Rolf