Erste Schritte mit der Google Fonts API

In diesem Leitfaden wird erläutert, wie Sie mit der Google Fonts API Schriftarten zu Ihrem Web hinzufügen können. Seiten. Sie müssen nichts programmieren. fügen Sie einfach ein spezielles Stylesheet-Link zu Ihrem HTML-Dokument und verweisen Sie dann in einem CSS-Stil auf die Schriftart.

Ein kurzes Beispiel

Hier ein Beispiel: Kopieren Sie den folgenden HTML-Code und fügen Sie ihn in eine Datei ein:

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

Öffnen Sie dann die Datei in einem modernen Webbrowser. Es sollte eine Seite mit dem in der Schriftart Tangerine:

Das Web schön!

Dieser Satz ist normaler Text, Sie können also dessen Darstellung mithilfe von CSS ändern. Ausprobieren So fügen Sie dem Stil aus dem vorherigen Beispiel einen Schatten hinzu:

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

Unter dem Text sollte jetzt ein Schlagschatten zu sehen sein:

Das Web schön!

Und das ist erst der Anfang dessen, was Sie mit der Fonts API und CSS machen können.

Übersicht

Sie können die Google Fonts API in nur zwei Schritten verwenden:

  1. Fügen Sie einen Stylesheet-Link hinzu, um die gewünschten Webschriftarten anzufordern: 

    <link rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Font+Name">

  2. Gestalten Sie ein Element mit der angeforderten Webschriftart, entweder in einem Stylesheet: 

    .css-selector {
font-family: 'Font Name', serif;
}

    oder mit einem Inline-Style für das Element selbst: 

    <div style="font-family: 'Font Name', serif;">Your text</div>

Eine Liste der verfügbaren Schriftarten finden Sie im Hilfeartikel Google-Schriftarten.

Schriftfamilien und -stile in einer Stylesheet-URL festlegen

Um zu bestimmen, welche URL in Ihrem Stylesheet-Link verwendet werden soll, beginnen Sie mit dem Basis-URL der Fonts API:

https://fonts.googleapis.com/css

Fügen Sie dann den URL-Parameter family= hinzu, mit einem oder mehreren Schriftfamiliennamen und Stile.

Um beispielsweise das Ereignis Schriftart Inconsolata:

https://fonts.googleapis.com/css?family=Inconsolata

Wenn du mehrere Schriftfamilien anfordern möchtest, trenne die Namen durch einen senkrechten Strich (|)

Um die Schriftarten anzufordern, Orange Inconsolata Droid Sans:

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Wenn Sie mehrere Schriftarten anfordern, können Sie alle diese Schriftarten auf Ihrer Seite verwenden. Aber das ist nicht alles. Die meisten Seiten benötigen nicht so viele Schriftarten. viele Schriftarten können das Laden Ihrer Seiten verlangsamen.)

Das Google Fonts API stellt die reguläre Version der angeforderten Schriftarten Standardeinstellung. Um andere Stile oder Gewichte anzufordern, hängen Sie einen Doppelpunkt (:) an den Namen von die Schriftart gefolgt von einer Liste von durch Kommas getrennten Stilen oder Gewichtungen (,).

Beispiel:

https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

Welche Stile und Schriftstärken für eine bestimmte Schriftart verfügbar sind, erfahren Sie in der welche Schriftart in Google Fonts aufgeführt ist.

Sie können für jeden Stil, den Sie anfordern, entweder den vollständigen Namen oder ein Abkürzung; Für Gewichtungen können Sie alternativ eine numerische Gewichtung angeben:

Stil Spezifizierer
kursiv italic oder i
fett bold oder b oder eine numerische Gewichtung wie 700
Fett-kursiv bolditalic oder bi

Um beispielsweise Cantarell Kursiv- und Droid Serif-Fettdruck anzufordern, könnten Sie der folgenden URLs: 

https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

Schriftartanzeige verwenden

Mit font-display können Sie was passiert, wenn die Schriftart nicht verfügbar ist. Anderen Wert angeben als der Standardwert für auto ist in der Regel angemessen.

Übergeben Sie den gewünschten Wert im Abfragestring-Parameter display: 

https://fonts.googleapis.com/css?family=Roboto&display=swap

Skriptteilmengen angeben

Einige Schriftarten im Google-Schriftartenverzeichnis mehrere Schriftzeichen (wie z. B. Latein, Kyrillisch und Griechisch) unterstützen. Um um anzugeben, welche Teilmengen heruntergeladen werden sollen, an die URL angehängt wird.

Um beispielsweise die kyrillische Teilmenge des Roboto Mono verwendet wird, würde die URL sein:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic

Um die griechische Teilmenge der Roboto Mono verwendet wird, würde die URL sein:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

Um sowohl griechische als auch kyrillische Teilmengen des Roboto Mono verwendet wird, würde die URL sein:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic

Die lateinische Teilmenge ist immer enthalten, sofern verfügbar, und muss nicht angegeben werden. Wenn ein Client-Browser Unicode-Bereich (http://caniuse.com/#feat=font-unicode-range) wird der Parameter „subset“ ignoriert. wählt der Browser aus den Teilmengen aus, die von der Schriftart unterstützt werden, um das zu bekommen, was zum Rendern des Texts erforderlich ist.

Eine vollständige Liste der verfügbaren Schriftarten und -untergruppen finden Sie unter Google Fonts:

Schriftartanfragen optimieren

Wenn Sie eine Webschriftart auf Ihrer Website oder in Ihrer App verwenden möchten, welche Buchstaben Sie benötigen. Dies geschieht häufig, wenn Sie eine in einem Logo oder in einer Überschrift.

In diesen Fällen empfiehlt es sich, den Wert text= in Ihrer Schriftart festzulegen. -Anforderungs-URL So kann Google eine Schriftartdatei zurückgeben, die für Ihr In einigen Fällen kann dadurch die Größe der Schriftartdatei um bis zu 90 % reduziert werden.

Um diese Funktion zu verwenden, fügen Sie einfach text= zu Ihren Google Fonts API-Anfragen hinzu. Für Wenn Sie beispielsweise Inconsolata nur für den Titel Ihres Blogs verwenden, können Sie den Titel selbst als Wert von text=. So würde die Anfrage aussehen wie:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello

Wie bei allen Abfragezeichenfolgen sollten Sie den Wert URL-codieren:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World

Diese Funktion funktioniert auch mit internationalen Schriftarten, sodass Sie UTF-8 angeben können. Zeichen. Beispiel: ¡Hola! wird so dargestellt:

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!

Schrifteffekte aktivieren (Beta)

Beim Erstellen von Überschriften oder Anzeigen von Texten auf Ihrer Website um Ihren Text auf dekorative Weise zu stilisieren. Um Ihnen die Arbeit zu erleichtern, hat Google eine Sammlung von Schrifteffekten, die Sie mit minimalem Aufwand nutzen können. ansprechende Anzeigetexte erstellen. Beispiel:

Das ist ein Schrifteffekt!

Füge einfach effect= zu deinen Google Fonts hinzu, um diese Betafunktion zu nutzen API-Anfrage an und fügen Sie den entsprechenden Klassennamen zu den HTML-Elementen hinzu, die Sie beeinflussen möchten. Im obigen Beispiel haben wir den Schrifteffekt shadow-multiple verwendet. sodass die Anfrage so aussieht:

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple

Wenn Sie den Effekt verwenden möchten, fügen Sie den HTML-Elementen den entsprechenden Klassennamen hinzu. Die dem entsprechenden Klassennamen immer der Effektname mit dem Präfix font-effect-, Daher wäre der Klassenname für shadow-multiple font-effect-shadow-multiple:

<div class="font-effect-shadow-multiple">This is a font effect!</div>

Du kannst mehrere Effekte anfordern, indem du die Effektnamen durch einen senkrechten Strich trennst Zeichen (|).

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

Hier finden Sie eine vollständige Liste aller von uns angebotenen Schrifteffekte:

Effekt API-Name Klassenname Support
Anaglyphen anaglyph font-effect-anaglyph Chrome, Firefox, Opera, Safari
Backsteinschild brick-sign font-effect-brick-sign Chrome, Safari
Leinwanddruck canvas-print font-effect-canvas-print Chrome, Safari
Kichern crackle font-effect-crackle Chrome, Safari
Verfall decaying font-effect-decaying Chrome, Safari
Zerstörung destruction font-effect-destruction Chrome, Safari
Verstört distressed font-effect-distressed Chrome, Safari
Buntes Holz distressed-wood font-effect-distressed-wood Chrome, Safari
Embos emboss font-effect-emboss Chrome, Firefox, Opera, Safari
Feuer fire font-effect-fire Chrome, Firefox, Opera, Safari
Feueranimation fire-animation font-effect-fire-animation Chrome, Firefox, Opera, Safari
Fragile fragile font-effect-fragile Chrome, Safari
Gräser grass font-effect-grass Chrome, Safari
Eis ice font-effect-ice Chrome, Safari
Mitose mitosis font-effect-mitosis Chrome, Safari
Neon neon font-effect-neon Chrome, Firefox, Opera, Safari
Umriss outline font-effect-outline Chrome, Firefox, Opera, Safari
Grüne Töne putting-green font-effect-putting-green Chrome, Safari
Verschmutzter Stahl scuffed-steel font-effect-scuffed-steel Chrome, Safari
Mehrfache Schatten shadow-multiple font-effect-shadow-multiple Chrome, Firefox, Opera, Safari
Gesplittert splintered font-effect-splintered Chrome, Safari
Statisch static font-effect-static Chrome, Safari
Stonewash stonewash font-effect-stonewash Chrome, Safari
Dreidimensional 3d font-effect-3d Chrome, Firefox, Opera, Safari
Dreidimensionaler Gleitkommawert 3d-float font-effect-3d-float Chrome, Firefox, Opera, Safari
Vintage vintage font-effect-vintage Chrome, Safari
Hintergrund wallpaper font-effect-wallpaper Chrome, Safari

Es gibt noch viele weitere Möglichkeiten, Schriftarten über CSS. Für den Anfang möchten wir Ihnen nur ein paar Ideen geben. Weitere Informationen können Sie mit der Google-Suche CSS-Texteffekte und stöbere durch viele der Ideen, die bereits im Web verfügbar sind!

Weitere Informationen