Link zu CSS-Dateien
Sie verlinken im Wesentlichen direkt auf CSS-Dateien auf Google.com. Über URL-Parameter geben Sie an, welche Schriftarten Sie möchten und welche Variationen dieser Schriftarten.
<head>
...
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans">
</head>CSS
In Ihrem CSS können Sie dann diese neuen Schriftarten nach Namen auf jedem gewünschten Element angeben.
body {
font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif;
font-size: 48px;
}FontLoader
Sie können den FontLoader JavaScript anstelle des CSS-Links verwenden. Dies hat Vorteile, wie die Kontrolle über das Flash of Unstyled Text (FOUT), und auch Nachteile, wie die Tatsache, dass die Schriftarten für Benutzer mit deaktiviertem JavaScript nicht geladen werden.
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: ['Cantarell']
}
});
</script>
<style type="text/css">
.wf-loading h1 { visibility: hidden; }
.wf-active h1, .wf-inactive h1 {
visibility: visible; font-family: 'Cantarell';
}
</style>Diese Klassennamen, z.B. .wf-loading, werden auf das <html>-Element angewendet. Achten Sie also darauf, wenn die Schriftarten "laden", können Sie diesen Klassennamen verwenden, um den Text auszublenden. Wenn sie dann angezeigt werden, machen Sie sie wieder sichtbar. So wird FOUT kontrolliert.
Das ist noch neu und ziemlich kompliziert für neue Programmierer. Aber es wird sich weiterentwickeln und bald sehr einfach sein.
Ich habe ein TextMate-Bundle für die Google Font API erstellt, sodass Sie einfach auf eine Schriftart im Menü klicken und sie importieren können, ohne die URL online nachschlagen zu müssen http://github.com/adrusi/Google-Font-Directory-TextMate-Bundle
Können Sie bitte den GitHub-Link aktualisieren?
Das ist nett. Aber das Problem ist, dass ich hier nicht viele Schriftarten finden konnte. Ich möchte regionale Schriftarten hinzufügen und kann sie nicht über die Google API bekommen.
Das ist eine willkommene Funktion ... eine JS für die Google Font API ...
Ich habe sie bereits in meiner Joomla-Vorlage implementiert. So können Benutzer zwischen 11 Google-Schriftarten wählen. Aber ich möchte mehr als eine Schriftart haben und diese für Überschriften und Text festlegen. Haben Sie dafür ein Skript? :)
Außerdem, verwende ich nur eine PHP-Variable, um Cantarell zu ändern?
Wir können auch die Google API-Schriftart importieren über
@import url(http://fonts.googleapis.com/css?family=Lobster);
daniel due-
Vielleicht etwas spät, aber fontSwitcher (JavaScript) erlaubt es Ihnen, mehrere Google-Schriftarten zu verwenden und auch neue hinzuzufügen oder sie im laufenden Betrieb auszutauschen
http://tech-in-check.blogspot.com/p/fontswitcher-google-font.html
Eine Sache, die man bedenken sollte, ist, dass Google Web Fonts unter IE und Firefox nicht geladen werden, wenn Sie die Seite lokal betrachten - nur unter Chrome. Sie müssen Ihre Seite vom Server aus in der Vorschau anzeigen.
Danke für den Tipp
Denken Sie daran, dass .wf-loading erst zu Ihrem -Tag hinzugefügt wird, wenn der Loader initialisiert wurde, was bedeutet, dass Sie immer noch FOUTs bekommen können. Ich umgehe dies, indem ich .wf-loading im -Tag fest codiere und .no-js.wf-loading als Fallback für Browser mit deaktiviertem JS verwende.
Jedes Mal, wenn Sie "im Tag" lesen, sollten Sie "im HTML-Tag" lesen. - Ich habe gerade die Posting-Tipps gelesen (╯°□°）╯︵ ┻━┻
Wo finde ich die vollständige Liste der unterstützten Schriftarten?
http://www.google.com/webfonts
Vielen Dank Shabir Gilkar für deinen Kommentar. Das ist die einzige Methode, die bei mir mit Internet Explorer funktioniert.
Als Hinweis: Wenn Sie das CSS in Ihrem Browser anzeigen (gemäß Ihrem heißen Tipp), stellen Sie sicher, dass Sie es in mehreren Browsern anzeigen (insbesondere Internet Explorer und Firefox oder Chrome), da Google serverseitige Technologien verwendet, um bestimmte CSS an verschiedene Browser auszuliefern.
Für Chrome, Opera und Firefox erhalten Sie nur Verweise auf die WOFF-Versionen der Schriftart, während Internet Explorer EOT-Verweise mit einer Weiterleitung zur WOFF-Version erhält.
Letztendlich sollte die WOFF-Version überall funktionieren, aber wenn Sie das kompatibelste CSS wünschen (gemäß https://css-tricks.de/snippets/css/using-font-face/ ), schauen Sie sich die EOT-Version über Internet Explorer an und verwenden Sie das CSS, das Ihrer Meinung nach am besten für Sie funktioniert!
Oder öffnen Sie einfach die Chrome Dev Tools und überschreiben Sie den User Agent (Zahnrad-Symbol unten links -> Overrides -> User Agent).
Wählen Sie IE und Sie erhalten das vollständige CSS.
Um Cole's Kommentar zu ergänzen: Sie erhalten EOT- und WOFF-Formate, wenn Sie den IE-Benutzeragenten verwenden. Android-Geräte benötigen möglicherweise das TTF-Format der Schriftart, das beim Überschreiben des Benutzeragenten bereitgestellt wird. Beachten Sie auch, dass Google Fonts unterschiedliche Versionen der WOFF-Schriftarten je nach Gerät bereitstellt (sehen Sie, was iOS-Benutzeragenten erhalten). Wenn dies wichtig ist, ist die Verwendung des Tags möglicherweise immer noch die bessere Option.
Das ist eine sehr nette Sache, dass Sie die API erwähnen. Einige Schriftarten sind großartig, aber ich bevorzuge es wirklich, die Schriftart auf der Website zu haben, wenn sie sich noch in der Webentwicklung befindet. Aber wenn die Website online ist, ist die Google CDN-Schriftart viel besser. Schöner Artikel übrigens.
Wenn Sie die URL in Ihren Browser einfügen, werden Ihnen nur Schriftarten für Ihren Browser angezeigt.
Sie erhalten nicht alle Schriftarten für alle Browser, die Sie unterstützen möchten.
Es ist keine schlechte Idee, aber Sie möchten den Vorgang in jedem der Browser wiederholen, die Sie unterstützen möchten.
Das funktioniert nicht in i9
Ich bevorzuge immer die JavaScript-Methode, da der Code am Ende der Seite eingefügt werden kann, um die Auswirkungen auf die Ladezeit der Seite zu reduzieren.
Übrigens, wer hat heutzutage JavaScript deaktiviert?
Hauptsächlich Besitzer von Aluhüten, scheint es!
Wunderbare Anleitung,
Jeder Anfänger kann lernen, wie man die großartigen Schriftarten von Google Fonts verwendet. Es gibt so viele coole Schriftarten für Webdesign.
Um die Diskussion für den Abschnitt "heißer Tipp" zu ergänzen.
In diesem Fall verwenden wir zum Beispiel
http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
Wenn Sie diesen Link in Chrome, Firefox oder IE einfügen, erhalten Sie je nach Browsertyp und -version unterschiedliche Regeln, wie bereits erwähnt.
Ich habe festgestellt, dass der einfachste Weg, Google Web Fonts aufzurufen, die Verwendung einer Import-Anweisung am Anfang Ihrer .css-Datei ist.
Mit unserem aktuellen Beispiel sieht das so aus:
@import url(‘http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans’);
Abgesehen davon, dass es eine einfache Lösung ist, ist sie auch elegant! :)
Hat jemand schon einmal ein Problem gehabt, bei dem der Google Chrome-Browser Schriftarten kursiv darstellt? Ich habe einen seltsamen Fehler, bei dem unter Firefox und IE alles in Ordnung ist, aber Google Chrome einige Schriftarten kursiv darstellt, obwohl keine Kursivschrift eingestellt ist?
Wollte nur mal fragen...
Das ist großartig, danke fürs Posten. Es wird sehr nützlich für neue Websites sein, die ich bauen werde.
Als Teil meiner Website bitte ich Besucher, eine Google-Schriftart und eine Farbe dafür auszuwählen. Dies soll auf ein Buchcover.
Dies wird in eine WordPress-Website integriert. Vorschläge oder Ideen sind willkommen. Danke
Was ist der Unterschied zwischen diesem Code und den Schriftart-Codes, die Sie in Ihrer CSS-Datei erstellen? Ich bin ein Neuling im Webdesign. Danke!
„Sans“, kurz für „sans-serif“, ist keine gute Kombination mit: „serif“, wie in Ihrem Beispiel. (Sans = ohne, serif = „Häkchen“).
Eine weitere Einschränkung des Fontloader-Skripts ist, dass es einige Sekunden dauert, bis die Schriftart geladen ist.
Wenn Sie also eine Kopfzeile auf Ihrer Website haben, die eine dieser Schriftarten verwendet, sehen Sie bei jedem Seitenaufruf den Fallback, bevor die von Ihnen platzierte Schriftart geladen wird.
Dies ist ein großartiger Ansatz, obwohl ich nicht zustimme, das Element beim Laden auszublenden. Was ist, wenn die Verbindung des Benutzers unterbrochen wird, bevor es geladen wird? Der Benutzer denkt, die Website sei kaputt oder so etwas. Ich würde es lieber mit einer webfreundlichen Schriftart im Ladestatus versehen, dann mit meiner benutzerdefinierten Schriftart, sobald sie geladen ist. Es mag aufblitzen, aber ich denke, es ist besser, nichts anzuzeigen. Nur ein Gedanke.
Webfontloader hat ein Ereignis dafür, sodass Sie den Text wieder sichtbar machen können. Sehen Sie sich die Ereignisse 'fontinactive' und 'inactive' an. Sie können sogar Ihr eigenes Zeitlimit festlegen.
https://github.com/typekit/webfontloader
„Da das Internet nicht zu 100 % zuverlässig ist, ist es möglich, dass eine Schriftart nicht geladen werden kann. Das Ereignis fontinactive wird nach 5 Sekunden ausgelöst, wenn die Schriftart nicht gerendert werden kann. Wenn mindestens eine Schriftart erfolgreich gerendert wird, wird das Ereignis active ausgelöst, andernfalls wird das Ereignis inactive ausgelöst.“
Ist es in Ordnung, es so zu schreiben?
Wie mache ich das richtig?
Hallo, ich habe das auf meiner Website PageSpeed gefunden
http://fonts.googleapis.com/css?family=Open+Sans%3A300%2C300italic%2C400%2C400italic%2C600%2C600italic%2C700%2C700italic&subset=latin%2Ccyrillic%2Cgreek&ver=4.2.2
Wie behebe ich das?
Können Sie mir helfen? Ich bin nicht gut in HTML.
Danke für die Hilfe, Attilio.
Die Google Developer PageSpeed Insights empfehlen, blockierenden JavaScript- und CSS-Code im oberen Bereich (above-the-fold content) zu eliminieren. Ist es eine gute Praxis, Google Fonts im Footer anstatt im Header zu laden?
Der "|" verursacht, dass http://validator.w3.org/ die Seite als fehlerhaft markiert. Verwenden Sie stattdessen %7C.