Google web-fonts lokal gespeichert versus online-Quelle

Wenn ich google web-fonts mithilfe der @import-Regel in meiner CSS-Datei, es funktioniert gut.

Aber wenn ich zum download, schriftart und speichern Sie es lokal in meinem server und dann direkt die @font-face-Regel zu meiner eigenen Maschine, es funktioniert nicht.

Also, was ich Tat, war, ersetzen Sie diese Zeile in meiner css/fonts.css-Datei:

@import url(http://fonts.googleapis.com/css?family=Michroma);

mit dabei:

@font-face {
font-family: 'Michroma';
font-style: normal;
font-weight: 400;
src: url(http://localhost/xampp/mysite/css/fonts/michroma/micrhoma.woff) format('woff');
}

In anderen Worten, ich habe gerade kopiert den code aus der googleapi für die schriftart. Und ich rettete die Schriftarten-Datei (.woff) in den Pfad oben (habe ich geprüft, es ist tatsächlich dort).

Ich habe versucht, die Bearbeitung der url zu diesem als gut, aber nicht gut:

src: url(fonts/michroma/michroma.woff) format('woff');

Ich kann nicht glauben, es gibt einen Grund, warum Google web fonts nicht funktionieren würde, wenn wir Sie lokal, also muss es etwas falsch mit dem, was ich Tue. Hinweise? Ist das nicht wie definieren wir unsere eigenen schriftart-Gesichter überhaupt? (Ich habe nie versucht, vor).

InformationsquelleAutor user961627 | 2012-09-10
  1. 2

    Als angegeben in den Kommentaren, die Ursache des Problems war falsch geschrieben, der font-name in der URL.

    Dies ist eine Möglichkeit zur Nutzung von Google fonts lokal. Der richtige Weg ist, um relative URLs verwenden, wie fonts/michroma/michroma.woff und nicht http: URLs mit localhost (Sie würde verlangen, dass Sie führen Sie einen HTTP-server auf Ihrem computer).

    Jedoch, es würde nicht funktionieren auf Browsern, die nicht unterstützt das WOFF-format (in diesem Fall). In der Regel, die Verwendung von Google-Fonts als remotely hosted ist besser, da Sie wissen, wie zu bedienen unterschiedliche font-Formate für verschiedene Browser. Vgl. zu Sollte ich lokal speichern, CSS generiert das Google Web Fonts API?

    • Off-topic, aber im Zusammenhang: für die Umwandlung ein .ttf-schriftart, die in mehr Formaten von den meisten Browsern unterstützt, den Kopf über FontSquirrel: fontsquirrel.com/fontface/generator. Gerade entdeckt, es ist genial.
    InformationsquelleAutor Jukka K. Korpela
  2. 1

    in eine einzige schriftart, die die Anführungszeichen für Namen für die schriftart ist nicht erforderlich. Sie sollten zu entfernen und führen es funktioniert.
    font-family: Michroma;

    • Eigentlich ist es jetzt gut!
    • Die Anführungszeichen sind optional, so entfernen Sie ist nicht wahrscheinlich, etwas zu beheben.
    • was meinst du? Hat Ihr Kommentar beziehen sich auf die vorgeschlagene Antwort? Ich kann immer noch Ihr problem reproduzieren mit Michroma (getestet auf IE, Firefox, Chrome), nicht aber mit einer anderen schriftart, - Roggen, so dass ich vermute, es ist ein font-Problem. Haben Sie laden Sie die schriftart? (Ich gerade getan habe, aber es hat nicht geholfen.)
    • Das problem war nur ein Rechtschreibfehler in der Quell-URL, ich glaube, ich hätte getippt "mihcroma" statt michroma. Versucht zu löschen, diese Frage aber leider.
    • Richtig, das war es. Ich veränderte den code in meinen tests ohne Prüfung der Schreibweise der Namen.
    InformationsquelleAutor Web Designer cum Promoter
Schreibe einen Kommentar