Schriften direkt in HTML einbetten

[Linuchs]

Moin,

ich möchte eine Visitenkarte im HTML Format an meine Mails anhängen.

Das Mailprogramm des Empfängers blockt externe Zugriffe, also müssen Bilder und ein Font Bestandteil des HTML Dokuments sein.

Bilder gehen so:

<img src="data:image/png;base64,iVBORw0...SuQmCC" />

Für Fonts habe ich kein Beispiel gefunden. Dieselbe Frage vom 24.04.2019 wurde von Felix Riesterer und Rolf B diskutiert, aber nicht beantwortet. Womöglich habe ich die Idee von Rolf nicht verstanden, er ist ja bekannt für präzise, praxistaugliche Antworten.

Wenn mein Server erreichbar ist, funktioniert dieser Code:

@font-face {
  src: url('./css/Lato-Thin.ttf') format('truetype');
  font-family: 'Lato';
  font-weight: normal;
  font-weight: thin;
  font-style: normal;
  font-color: #ccc;
  font-color: #000;
}

Gibt es neue Erkenntnisse?

Gruß, Linuchs

[Robert B.]

Moin Linuchs,

ich möchte eine Visitenkarte im HTML Format an meine Mails anhängen.

Das Mailprogramm des Empfängers blockt externe Zugriffe, also müssen Bilder und ein Font Bestandteil des HTML Dokuments sein.

Eigentlich sollte so eine Visitenkarte als Anhang doch nicht signifikant größer als der Hauptinhalt sein. Bilder, Schriftarten, da kommen doch schnell mehrere hundert KB nur für den Anhang zusammen.

Für Fonts habe ich kein Beispiel gefunden. Dieselbe Frage vom 24.04.2019 wurde von Felix Riesterer und Rolf B diskutiert, aber nicht beantwortet.

Hast du denn schon data-URIs ausprobiert? Das ist ja der damalige Vorschlag:

@font-face {
    src: url(data:…);
} 

Viele Grüße
Robert

[Linuchs]

schon data-URIs ausprobiert?

Was soll denn hinter data: stehen?

Die Datei Lato-Thin.ttf kann ich nicht mit eine Texteditor öffnen. Wie soll ich die in den HTML-Sourcecode kopieren?

Gruß, Linuchs

[Matthias Scharwies]

Servus!

schon data-URIs ausprobiert?

Was soll denn hinter data: stehen?

Die Datei Lato-Thin.ttf kann ich nicht mit eine Texteditor öffnen. Wie soll ich die in den HTML-Sourcecode kopieren?

1. .ttf ist out → heute verwendet man .woff , besser noch .woff2 (Typografie/Schriftformatierung#woff2_-_das_beste_Format)

2. date steht für eine base64-Codierung (Grafik/Grafiken_mit_Data-URI); siehe das entsprechende Helferlein von Felix Riesterer

   • hier ist ein anderer Converter: https://base64.guru/converter/encode/file ^[1]

3. Ein guter Code-Editor sollte jede Datei öffnen können.

Herzliche Grüße

Matthias Scharwies

PS: Wir sind am 24.11. abends ab 18:00 in Mainz unterwegs. Hättest du Lust, zu uns zu stoßen?

---

1. Base64 encoded OpenType font-face using data URI (Stack Overflow) ↩︎

[Rolf B]

Hallo Matthias Scharwies,

Ein guter Code-Editor sollte jede Datei öffnen können.

Ja, aber bitte keine Font-Dateien. Die sind kein Sourcecode.

siehe das entsprechende Helferlein von Felix Riesterer

Genau das hätte ich jetzt auch versucht.

Da steht zwar „Bilddatei“, aber grundsätzlich kann man jede Folge von Datenbytes in eine data-URL verpacken. Fontfiles sind allerdings nicht klein, wenn so ein WOFF Dings 200KB groß ist, hat man bei base64-Codierung eine 300KB lange Zeile im CSS stehen und das ist in einer Mail ein ziemlicher Batzen.

Die technische Frage ist dann, ob data-URLs blindlings überall verwendet werden können. Ich muss ja eine http/https URL in einen Netzwerkzugriff umsetzen, und ich würde bezweifeln, dass jedes Tool, das Webrequests unterstützt, automatisch data-URLs erkennt und sie decodiert. Versuch macht kluch…

Die fachliche Frage ist, ob für diesen Anwendungsfall

ich möchte eine Visitenkarte im HTML Format an meine Mails anhängen.

ein 300KB großer CSS Klops wünschenswert ist. Die Visitenkarte als Grafik dürfte deutlich kleiner sein.

Zumindest müsste man die Font-Datei mit einem Tool behandeln, das die unbenutzten Glyphen ausfiltert. Damit dürfte sie auf handhabbare Größe schrumpfen. Ich kenne bloß keins für WOFF…

Rolf

[Gunnar Bittersmann]

@@Rolf B

Zumindest müsste man die Font-Datei mit einem Tool behandeln, das die unbenutzten Glyphen ausfiltert. Damit dürfte sie auf handhabbare Größe schrumpfen. Ich kenne bloß keins für WOFF…

Glyphhanger kann IIRC angegebene Dateien/Webressourcen(?) durchsuchen und die Bereiche der darin verwendeten Zeichen ausgeben. Und Subsets erstellen.

S.a. TIL about font subsetting und TIL about font subsetting₂

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Linuchs,

Was soll denn hinter data: stehen?

Wie eine Data-URL aufgebaut ist, steht im Selfwiki.

Der MIME-Typ ist für WOFF2-Fonts font/woff2. Die übrigen Fonttypen waren früher mal ein ziemliches Durcheinander (sieht man bspw. hier), aber RFC 8081 hat damit offenbar Schluss gemacht. Hier ist die IANA Liste.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Der MIME-Typ ist für WOFF2-Fonts font/woff2. Die übrigen Fonttypen

… sind fürs Web irrelevant.

Ja, auch WOFF (ohne 2). Es sei denn, man hat den betreffenden Font nur als WOFF und die Lizenz verbietet eine Umwandlung in WOFF2.

🖖 Живіть довго і процвітайте

[MudGuard]

Hi,

Eigentlich sollte so eine Visitenkarte als Anhang doch nicht signifikant größer als der Hauptinhalt sein. Bilder, Schriftarten, da kommen doch schnell mehrere hundert KB nur für den Anhang zusammen.

VCARD (.vcf) ist doch da das Übliche - das können die Mail-Programme dann auch in das Adreßbuch übernehmen.

cu,
Andreas a/k/a MudGuard

[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

[MudGuard]

Hi,

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

Da Mail-Clients oft nur einen sehr eingeschränkten CSS-Umfang beherrschen, würde ich vermuten, daß das auch nicht immer bzw. sogar nur selten funktionieren wird beim Mail-Empfänger.

Und viel Traffic. Für Dich und für den Empfänger (ich sage nur: Mobile, ggf. im (nicht-EU-)Ausland, also mit eingeschränktem Datenvolumen/geringer Datenrate)

Und ich frage mich auch, ob von den wenigen Usern, die das dann evtl. sehen werden, viele drauf achten?

Frei nach Shakespeare: viel LärmAufwand um Nichts …

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@Rolf B

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…

Was ist daran so seltsam, dass nur die Reihenfolge funktioniert, die auch spezifiziert ist?

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

wenn man die Spec anguckt und dran denkt, dass die mehr als eine URL zulässt, nix. Wenn man aber nur eine URL in der src-Eigenschaft hat, und die Spec nicht im Kopf, dann wirkt es wie ein unnötiger Zwang zur Reihenfolge.

Danke für den Hinweis auf die Spec.

Rolf

[encoder]

Auch mein erster Gedanke war hä wozu denn das?

Wer liest sich denn überhaupt schon Signaturen durch? Wir sind hier und da, bitte Mail nicht ausdrucken… an jeder Mail immer das gleiche, etlicher Blubber den ich gar nicht kenne und der teilweise viel viel größer ist als der eigentliche Inhalt der Mail.
Dann Visitenkarten, die macht man vielleicht einmal auf um den Inhalt woanders hin zu übernehmen, das wars dann.

Und du überlegst ernsthaft wie du an jede einzelne Mail die du versendest eine Schriftart anhängen kannst, die tausende mal größer als der eigentliche textuellen Inhalt der Mail ist?
Ich würds einfach lassen. Ehrlich, das schafft keine Freunde.

Übrigens auch das herunterladen beim Öffnen einer Mail ist in meinen Augen Mist. Was ich Newsletter krieg in denen ich kein einziges Wort mehr sehen kann, weil ich eingestellt habe dass nicht automatisch aller mögliche Tracking-Inhalt von irgendwoher nachgeladen werden kann.
Dass ich wirklich bei manchen Mails außer am Betreff gar nicht sehe worum es geht, stört mich schon lange nicht mehr.

[Raketenwilli]

Gut, ich das nicht schreiben musste.

[maroph]

In meinem GitHub Repository maroph/chess-merida-webfont findest du ein Beispiel, in dem ich den Truetype Schachfont Mérida in HTML nutze. Ein Beispiel findest du hier.

Vielleicht hilft dir das weiter.

Gruß
Manfred

[Gunnar Bittersmann]

@@maroph

Vielleicht hilft dir das weiter.

Nein. Bei Linuchs geht es speziell um die Einbettung von Webfonts in HTML-E-Mails, nicht in Webseiten.

Übrigens, warum ein Font, der Buchstaben als Schachfiguren darstellt? Schachfiguren haben eigene Unicode-Zeichen: U+2654 bis U+265F (Block Miscellaneous Symbols).

🖖 Живіть довго і процвітайте