Wie binde ich Google Web Fonts in eine SVG ein?


48

Ich schreibe auf meiner Website einen Artikel über die Vorteile neuer Webtechnologien, unter anderem HTML5, CSS3 und SVGs. Einer der Vorteile der letzteren ist die Möglichkeit, Text in einem ansonsten effektiven Bild auszuwählen.

Ich bin neu in SVGs und habe gerade meine erste anständige Grafik in Illustrator erstellt. Ich habe es in eine Seite mit dem GWF-Skript für die Ubuntu-Schriftart im Tag eingebettet. Wie sich herausstellt, wird die Ubuntu-Schriftart im regulären Text korrekt angezeigt. Damit dieser Trick in der SVG funktioniert, muss das Google-Skript in die SVG selbst eingebettet sein. Wie kann ich das machen?


1
Ein wichtiger Hinweis zu den auf @import basierenden Lösungen: Sie funktionieren nicht für Hintergrundbilder. Sie müssen die Schriftart über base64 einbetten oder stattdessen ein Bild- / Objekt-Tag verwenden.
Mickey

Antworten:


39

Sie binden Schriftarten in CSS ein, indem Sie die Base64-Codierung verwenden. Sie können Stile in SVG-Dokumenten anwenden, die CSS ähneln, indem Sie ein <style />Element verwenden. Wenn Sie also eine WOFF-Schriftart haben, würden Sie sie folgendermaßen einbetten:

<style>
@font-face {
    font-family: "Sample font";
    src: url("data:application/font-woff;charset=utf-8;base64,...");
}
</style>

Wo ...sind die Base64-codierten Schriftdaten?

Beispiele hierfür finden Sie in den Stylesheets von Typekit. Ich bin nicht sicher, ob der MIME-Typ font/woffkorrekt ist, da ich auch Leute gesehen habe, die behaupten, dass es sein sollte application/font-woff. Obwohl font/woff, font/truetype, font/opentypeetc. scheinen beliebt zu sein.

Alternativ können Sie auch die SVG-Version der Web-Schriftart verwenden und das Beschreibungs-Markup der SVG-Schriftart in Ihr Dokument einbetten (obwohl die Browser-Unterstützung nach wie vor sehr eingeschränkt ist, wie Luke in den Kommentaren festhält).

Sie sollten jedoch auch in der Lage sein, eine Verknüpfung zu einer externen Schriftart gemäß der SVG-Spezifikation herzustellen . Das scheint die beste Lösung zu sein, wenn Sie mehrere SVG-Dokumente haben, die auf diese Schriftart verweisen.


2
Der richtige MIME-Typ für .woff ist jetzt application/font-woff. stackoverflow.com/a/5142316/90674
sshow

3
In Bezug auf "Sie könnten tatsächlich die SVG-Version der Web-Schriftart verwenden und die Beschreibungsmarkierung der SVG-Schriftart in Ihr Dokument einbetten" sollten Sie wissen, dass "SVG-Schriftarten derzeit nur in Safari und Android-Browser unterstützt werden". Siehe developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts (auch caniuse.com/#feat=svg-fonts )
Luke,

1
Dieser Thread hat sehr geholfen, aber die Frage wurde dann, wie man eine Schriftart in base64 konvertiert. Diese Seite transfonter.org hat viel geholfen und ermöglicht es einem, nur einen Teil der zu konvertierenden Schriftart auszuwählen, um die Dateigröße zu reduzieren.
Fabien Snauwaert

Diese Antwort sah verlockend aus, aber letztendlich stellte ich fest, dass diese Schritte einfacher waren, und teilte sie mit: graphicdesign.stackexchange.com/a/124900/45239
Ryan,

Wenn ich dieses SVG in Adobe Illustrator öffne, werden keine Schriftarten geladen. Irgendeine Hilfe?
Aamir Nakhwa

13

Ein <defs>Abschnitt wie

<defs>
  <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>

funktioniert.


13
In aktuellen (Februar 2016) Webbrowsern funktioniert dies nur, wenn die SVG-Datei eigenständig geladen wird. Ein Beispiel finden Sie unter marians.github.io/test-webfonts-in-svg/test.svg . Wenn Sie dieselbe SVG-Datei in einer HTML-Seite öffnen, wird die Schriftart nicht geladen / gerendert. Verwenden Sie als Beispiel marians.github.io/test-webfonts-in-svg .
Marian

1
Sowohl die eigenständige SVG- als auch die HTML-Seite scheinen in Chrome Version 73.0.3683.103 (Official Build) (64-Bit) gleich zu funktionieren.
Paul Grime

Es lädt Schriftarten, wenn ich svg im Browser öffne, aber wenn ich dieselbe svg-Datei in Adobe Illustrator öffne, werden keine Schriftarten geladen. Irgendeine Hilfe?
Aamir Nakhwa

3

Sie können Google Web Fonts mit Nano direkt in Ihre SVG- Datei einbetten . Es scannt automatisch Ihre SVG-Datei und bettet selektiv nur die benötigten Schriftarten ein, um sicherzustellen, dass Ihre Ubuntu-Schriftarten auf allen modernen Browsern gleich aussehen. In meinem Fall brauchte ich Roboto, um in meine SVG eingebettet zu werden:

Bildbeschreibung hier eingeben

Haftungsausschluss: Ich bin mit dem Team hinter Nano zusammen, und auch wir hatten zuvor das gleiche Problem. Daher haben wir uns entschlossen, unseren eigenen Juckreiz durch den Bau von Nano zu bekämpfen. Hoffe das ist hilfreich!

Bearbeiten: Hier ist eine kurze Erklärung, was hinter den Kulissen passiert:

Um Schriften in SVG einzubetten, müssen Sie zunächst wissen, welche Schriftfamilien verwendet werden. Dann müssen Sie diese Schriftdateien finden und herunterladen. Nach dem Herunterladen müssen Sie reguläre, fette, kursive und fette Kursive in Base 64-Codierung konvertieren. Wenn Sie es manuell tun, ist es eine enorme Arbeit, über eine große Anzahl von Dateien zu wissen, welche Datei Fettdruck verwendet und welche nicht. Dann müssen Sie alle 4 Base 64-codierten Zeichenfolgen in Ihre SVG-Datei kopieren.

Aus diesem Grund erstellen wir Nano und stellen sicher, dass es SVG automatisch scannt und nur die verwendeten Schriftarten einfügt. Wenn beispielsweise Fettdruck nicht verwendet wird oder kein Text vorhanden ist, werden keine Schriftarten eingebettet. Alles, was Sie tun müssen, ist Ihr SVG per Drag & Drop in Nano zu verschieben und es funktioniert wie ein Zauber! Weitere Informationen finden Sie hier: https://vecta.io/blog/making-svg-easier-to-use


OK, sieht gut aus. Leider wird beim Hochladen auf eine Wordpress-Site, die die SVG-Datei bisher gerne akzeptiert hat, nicht die Meldung "Aus Sicherheitsgründen ist dieser Dateityp leider nicht zulässig." - Was muss ich zurücklegen, damit das funktioniert?
Chris Pink

1

Dies ist möglicherweise zu einfach, aber haben Sie darüber nachgedacht, die Schriftart als Zip-Datei von Google herunterzuladen und Illustrator sie dann nach Bedarf in Ihre SVG-Dateiausgabe konvertieren zu lassen?

Dies ist nur theoretisch, da ich dies noch nicht ausprobiert habe, aber theoretisch scheint es zu funktionieren.


0

Fügen Sie nach dem <desc>Tag Folgendes hinzu

<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>

Warum so viele Google-Schriftarten? Es sind nicht einmal alle oder die am häufigsten verwendeten, die ich viel sehe und die das SVG-Gesamtgewicht erhöhen werden.
MrMesees

Es lädt Schriftarten, wenn ich svg im Browser öffne, aber wenn ich dieselbe svg-Datei in Adobe Illustrator öffne, werden keine Schriftarten geladen. Irgendeine Hilfe?
Aamir Nakhwa

0

UPDATE zu meiner Antwort. Ich bevorzuge jetzt eine andere Antwort auf dieser Seite, die Nano verwenden soll: https://graphicdesign.stackexchange.com/a/121950/45239

Angenommen, Sie haben eine Web-Schriftart heruntergeladen und auf Ihrem System installiert und eine SVG-Datei erstellt (möglicherweise mit den gleichen Schritten wie unten beschrieben, aber ohne "Schriftart: In Umrisse konvertieren"), können Sie die SVG-Datei in Nano hochladen Zeigen Sie die Option "Schriftart einbetten: Ja" an und klicken Sie auf "Herunterladen".

Meine vorherige Antwort:

Wenn Sie bereit sind, auf wählbaren Text und SEO zu verzichten:

  1. Laden Sie die Web-Schriftart herunter.
  2. Installieren Sie es lokal.
  3. Öffnen Sie Adobe Illustrator
  4. Tippe deinen Text.
  5. Datei> Exportieren> Exportieren als ...
  6. Wähle ".SVG"
  7. Wählen Sie diese Einstellungen:

    • Styling: Inline Style
    • Schriftart: In Konturen konvertieren
    • : Konserve
    • Objekt-IDs: Layernamen
    • Dezimalzahl: 2
    • (aktiviert) Verkleinern
    • (aktiviert) Responsive
  8. Laden Sie die resultierende Datei optional auf https://vecta.io/nano hoch. (Die Dateigröße konnte um 8,2% reduziert werden.)


Leider ist die Option "In Konturen konvertieren" für kleinere Textgrößen nicht geeignet.
Chris Pink

@ ChrisPink, ja, Sie haben Recht! Bitte teilen Sie, wenn Sie eine andere Option für kleine Schriftgröße gefunden haben
Super Model

1
@SuperModel Ich habe Nano mit großem Erfolg verwendet, wobei die Schriftarten Stile aus dem beigefügten Dokument übernommen haben. Meine ersten Versuche scheiterten, aber mit der freundlichen Hilfe des Nano-Teams, das wir ausgearbeitet haben, musste sichergestellt werden, dass der SVG-Header intakt blieb.
Chris Pink
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.