Wie bette ich Google Web Fonts in ein SVG ein?

Sie betten Schriftarten in CSS ein, indem Sie die base64-Codierung verwenden. Sie können Stile in SVG-Dokumenten ähnlich wie CSS anwenden, indem Sie ein <style />Element verwenden. Wenn Sie also eine WOFF-Schriftart haben, würden Sie sie wie folgt 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 dafür finden Sie in den Stylesheets von Typekit. Ich bin mir nicht sicher, ob der Mime-Typ von font/woffkorrekt ist, da ich auch Leute gesehen habe, die behaupteten, dass es so sein sollte application/font-woff. Obwohl font/woff, font/truetype, font/opentype, usw. beliebter zu sein scheinen.

Alternativ könnten Sie tatsächlich die SVG-Version der Webschriftart nehmen und das Beschreibungs-Markup der SVG-Schriftart in Ihr Dokument einbetten (obwohl die Browserunterstützung immer noch sehr begrenzt ist, wie Luke in den Kommentaren feststellt).

Sie sollten jedoch auch auf eine externe Schriftart gemäß der SVG-Spezifikation verlinken können . Das scheint die beste Lösung zu sein, wenn Sie mehrere SVG-Dokumente haben, die auf diese Schriftart verweisen.

Ein <defs>Abschnitt wie

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

funktioniert.

Sie können Google Web Fonts direkt mit Nano in Ihr SVG einbetten . Es scannt automatisch Ihr SVG und bettet selektiv nur die erforderlichen Schriftarten ein, um sicherzustellen, dass Ihre Ubuntu-Schriftarten in allen modernen Browsern gleich aussehen. In meinem Fall musste Roboto in mein SVG eingebettet werden:

Haftungsausschluss: Ich bin beim Team hinter Nano, und auch wir standen zuvor vor dem gleichen Problem und haben uns daher entschieden, unseren eigenen Juckreiz zu kratzen, indem wir Nano gebaut haben. Hoffe, das ist hilfreich!

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

Um Schriften in SVG einzubetten, muss man zunächst wissen, welche Schriftfamilien verwendet werden. Dann müssen Sie diese Schriftartdateien finden und herunterladen. Nach dem Herunterladen müssen Sie normale, fette, kursive und fette Kursivschrift in die Base-64-Codierung konvertieren. Wenn Sie es manuell tun, ist es eine enorme Menge an Arbeit, bei einer großen Anzahl von Dateien zu wissen, welche Datei Fett verwendet und welche nicht. Dann müssen Sie alle 4 Base-64-codierten Strings in Ihr SVG kopieren.

Aus diesem Grund bauen wir Nano und stellen sicher, dass SVG automatisch gescannt und nur die verwendeten Schriftarten eingefügt werden. Wenn beispielsweise keine Fettschrift verwendet wird oder kein Text vorhanden ist, werden keine Schriftarten eingebettet. Alles, was Sie tun müssen, ist, Ihr SVG in Nano zu ziehen und abzulegen, und es funktioniert wie ein Zauber! Hier erfahren Sie mehr: https://vecta.io/blog/making-svg-easier-to-use

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 Webschriftart auf Ihr System heruntergeladen und installiert und eine SVG-Datei erstellt (vielleicht mit vielen der unten beschriebenen Schritte, aber ohne „Schriftart: In Konturen konvertieren“), können Sie die SVG-Datei auf Nano hochladen und sehen Sie sich die Option "Schriftart einbetten: Ja" an und klicken Sie auf Herunterladen.

Meine bisherige Antwort:

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

1. Laden Sie die Webschriftart herunter.
2. Installieren Sie es lokal.
3. Öffnen Sie Adobe Illustrator
4. Tippe deinen Text.
5. Datei > Exportieren > Exportieren als…
6. Wählen Sie „.SVG“

7. Wählen Sie diese Einstellungen:

   • Styling: Inline-Stil
   • Schriftart: In Konturen konvertieren
   • Bilder: Erhalten
   • Objekt-IDs: Layer-Namen
   • Dezimal: 2
   • (aktiviert) Minimieren
   • (aktiviert) Reagiert

8. Laden Sie optional das resultierende SVG auf https://vecta.io/nano hoch (es konnte meine Dateigröße um 8,2% reduzieren)

Neben Nano können Sie sich auch svg-buddy ansehen . Das ist ein Kommandozeilentool, das die verwendeten Schriftarten in Ihrem SVG automatisch erkennt, sie von Google Fonts herunterlädt und die base64-codierten Schriftarten in das defsTag des SVG einbettet. Dadurch wird sichergestellt, dass das SVG unabhängig von den installierten Schriftarten auf dem System des Benutzers auf allen Geräten gleich angezeigt wird. Darüber hinaus svg-buddykann auch eine grundlegende Optimierung angewendet werden, um die Dateigröße zu reduzieren. Es ist völlig kostenlos und funktioniert offline.

Haftungsausschluss: Ich bin der Autor dieses Open-Source-Tools. Ich hoffe, dass es für andere nützlich ist.

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

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

Fügen Sie das folgende After <desc>-Tag 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>

Ich konnte das Problem beheben, indem ich, anstatt das SVG als Quelle eines Bildes in der HTML-Datei zu verwenden, das SVG inline in das HTML selbst eingefügt habe.

Beispiel: (hat nicht funktioniert)

<img src="/img/my_svg.svg">

Ich musste das eigentliche SVG in die HTML-Datei selbst einfügen. Dann konnte Safari die Schriftarten lesen, die ich zuvor importiert hatte.

Ab Werk)

<svg class="coupon" height="220.254" viewBox="0 0 434.842 220.254" width="434.842" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <linearGradient id="a" gradientUnits="objectBoundingBox" x1=".079" x2=".933" y1=".088" y2=".879">
        <stop offset="0" stop-color="#00b2dc"/>
        <stop offset="1" stop-color="#00dac4"/>
    </linearGradient>
    <path d="m281.406 302.474a6.213 6.213 0 0 1 -6.167-6.914l.726-6.415a15.2 15.2 0 0 0 .1-1.7 14.846 14.846 0 0 0 -14.817-14.845c-.461 0-.915.026-1.364.066l-6.275.565a6.21 6.21 0 0 1 -6.763-6.189v-149.4a6.209 6.209 0 0 1 6.762-6.189l6.275.563c.451.04.906.068 1.366.068a14.846 14.846 0 0 0 14.819-14.839 15.225 15.225 0 0 0 -.1-1.7l-.726-6.415a6.212 6.212 0 0 1 6.167-6.912h365.712a6.211 6.211 0 0 1 6.167 6.912l-.724 6.415a15.316 15.316 0 0 0 -.1 1.7 14.844 14.844 0 0 0 14.818 14.839c.461 0 .917-.028 1.366-.068l6.277-.563a6.209 6.209 0 0 1 6.761 6.189v149.4a6.211 6.211 0 0 1 -6.763 6.189l-6.277-.565c-.449-.04-.9-.066-1.364-.066a14.844 14.844 0 0 0 -14.818 14.837 15.316 15.316 0 0 0 .1 1.7l.724 6.415a6.212 6.212 0 0 1 -6.167 6.914z" fill="#fff" transform="translate(-246.845 -82.22)"/>
    <path d="m661.315 118.088a26.8 26.8 0 0 1 -26.785-26.82 27.426 27.426 0 0 1 .176-3.048h-352.816a27.448 27.448 0 0 1 .176 3.048 26.8 26.8 0 0 1 -26.785 26.821c-.822 0-1.634-.042-2.435-.114v136.777c.8-.074 1.614-.116 2.435-.116a26.8 26.8 0 0 1 26.785 26.823 27.477 27.477 0 0 1 -.176 3.048h352.816a27.455 27.455 0 0 1 -.176-3.048 26.8 26.8 0 0 1 26.785-26.823c.822 0 1.634.042 2.435.116v-136.777c-.802.072-1.614.113-2.435.113z" fill="url(#a)" transform="translate(-240.878 -76.237)"/>
    <g fill="#fff">
        <path d="m621.645 274.026h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.975v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.968zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-17.291-.859a33.59 33.59 0 0 0 -2.734-9.267l1.811-.835a35.522 35.522 0 0 1 2.888 9.824zm341.224-7.679-1.851-.741a35.833 35.833 0 0 1 5.1-8.866l1.568 1.232a33.823 33.823 0 0 0 -4.823 8.375zm-349.198-9.708a34.131 34.131 0 0 0 -7.31-6.315l1.075-1.682a36.025 36.025 0 0 1 7.739 6.687zm360.994-5.343-1.159-1.628a35.748 35.748 0 0 1 9.083-4.7l.652 1.891a33.621 33.621 0 0 0 -8.577 4.437zm-377.09-4.959a33.483 33.483 0 0 0 -3.979-.891l-.84-.138v-6.629h1.994v4.939c1.137.21 2.27.479 3.377.8zm392.125-5.88h-1.995v-9.986h1.995zm-394.949-11.763h-1.994v-9.986h1.994zm394.949-8.209h-1.995v-9.986h1.995zm-394.949-11.764h-1.994v-9.986h1.994zm394.949-8.209h-1.995v-9.986h1.995zm-394.949-11.763h-1.994v-9.99h1.994zm394.949-8.209h-1.995v-9.981h1.995zm-394.949-11.763h-1.994v-9.986h1.994zm394.949-8.209h-1.995v-9.986h1.995zm-394.949-11.763h-1.994v-9.986h1.994zm394.949-8.209h-1.995v-9.986h1.995zm-394.949-11.763h-1.994v-6.679l.84-.134a33.762 33.762 0 0 0 3.935-.881l.551 1.919c-1.1.316-2.214.577-3.331.787zm391.395-5.313a35.649 35.649 0 0 1 -9.522-3.731l.985-1.736a33.641 33.641 0 0 0 8.987 3.519zm-378.745-4.673-1.073-1.686a33.95 33.95 0 0 0 7.317-6.302l1.5 1.314a36.072 36.072 0 0 1 -7.745 6.673zm361.147-5.331a35.941 35.941 0 0 1 -5.99-8.292l1.765-.929a33.98 33.98 0 0 0 5.659 7.833zm-347.837-9.934-1.811-.837a33.663 33.663 0 0 0 2.737-9.265l1.975.286a35.635 35.635 0 0 1 -2.901 9.816zm338.45-8.013c-.064-.33-.126-.659-.182-.993h-7.3v-2h9.017l.122.857c.082.587.181 1.166.3 1.742zm-17.45-.993h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.963zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.975v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.98v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.968zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973z" transform="translate(-237.397 -72.746)"/>
        <text font-family="Poppins-Medium, Poppins" font-size="28" font-weight="500" letter-spacing=".05em" transform="translate(78 70.476)">
            <tspan x="0" y="0">This is</tspan>
        </text>
        <text font-family="Poppins-Bold, Poppins" font-size="112" font-weight="700" transform="translate(79 172.476)">
            <tspan x="0" y="0">a test</tspan>
        </text>
    </g>
</svg>

Beachten Sie, dass Sie in diesem Fall Ihre Schriftarten importieren MÜSSEN !

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

Hoffe, das hilft jemandem da draußen!

Viel Glück 😊

Stieß auf das gleiche Problem und erstellte ein ähnliches Tool wie nano und svg-buddy. Im Vergleich zu Nano ist es ein kostenloses Tool. Und im Vergleich zu svg-buddy ist es in NodeJS statt in Java geschrieben, sodass es für jeden, der Node bereits auf seinem Computer hat, einfach zu installieren (oder auch beizutragen!) ist.

Das Tool ist für Google Fonts optimiert. Es leitet ab, welche Buchstaben verwendet werden, indem es das SVG nach Schriftdefinitionen durchsucht. Die Buchstaben werden dann an Google Fonts übergeben, damit die am besten optimierten Schriftartdateien zurückgegeben werden können. Diese Optimierung führt zu einer dramatisch kleineren Dateigröße.

https://github.com/coolov/svgum