Grundlagen der Google Font API - CSS-Tricks

Link zu CSS-Dateien

Sie verlinken im Wesentlichen direkt auf CSS-Dateien auf Google.com. Über URL-Parameter legen Sie fest, welche Schriftarten Sie möchten und welche Variationen dieser Schriftarten.

… 

Idee: Sie können eine zusätzliche Netzwerkanforderung vermeiden, indem Sie dieses Stylesheet öffnen und das @ font-face-Material kopieren und in Ihr Haupt-Stylesheet einfügen. Aber Vorsicht: Google führt einige User Agent-Sniffing-Aktionen durch, um manchmal verschiedene Dinge nach Bedarf auf verschiedenen Geräten bereitzustellen. Sie werden davon nicht profitieren, wenn Sie dies tun.

CSS

In Ihrem CSS können Sie diese neuen Schriftarten dann nach Namen für jedes Element angeben, das Sie verwenden möchten.

body ( font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; )

FontLoader

Sie können das FontLoader-JavaScript verwenden, anstatt eine Verknüpfung zum CSS herzustellen. Es hat Vorteile wie die Steuerung des Flash of Unstyled Text (FOUT) und auch Nachteile wie die Tatsache, dass die Schriftarten für Benutzer mit deaktiviertem JavaScript nicht geladen werden.

 WebFont.load(( google: ( families: ('Cantarell') ) )); .wf-loading h1 ( visibility: hidden; ) .wf-active h1, .wf-inactive h1 ( visibility: visible; font-family: 'Cantarell'; ) 

Diese Klassennamen werden z. B. .wf-loadingauf das Element angewendet . Beachten Sie also, dass Sie beim Laden der Schriftarten diesen Klassennamen verwenden können, um den Text auszublenden. Wenn sie dann angezeigt werden, machen Sie sie wieder sichtbar. So wird FOUT gesteuert.