Podstawy Google Font API - CSS-Tricks

Link do plików CSS

Zasadniczo łączysz bezpośrednio z plikami CSS na Google.com. Dzięki parametrom adresu URL określasz, które czcionki chcesz i jakie odmiany tych czcionek.

… 

Pomysł: Możesz uniknąć dodatkowego żądania sieciowego, otwierając ten arkusz stylów i kopiując i wklejając zawartość @ font-face do głównego arkusza stylów. Ale uwaga: Google używa niektórych klientów użytkownika, aby węszyć rzeczy, aby czasami w razie potrzeby udostępniać różne rzeczy różnym urządzeniom. Nie skorzystasz na tym, jeśli zrobisz to w ten sposób.

CSS

W swoim CSS możesz następnie określić te nowe czcionki według nazwy na dowolnym elemencie, którego chcesz użyć.

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

FontLoader

Możesz użyć JavaScript FontLoader zamiast łączyć się z CSS. Ma zalety, takie jak kontrolowanie Flash of Unstyled Text (FOUT), a także wady, takie jak fakt, że czcionki nie ładują się dla użytkowników z wyłączonym JavaScriptem.

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

Te nazwy klas, np. .wf-loadingZostaną zastosowane do elementu. Zwróć więc uwagę, że kiedy czcionki się „ładują”, możesz użyć tej nazwy klasy do ukrycia tekstu. Następnie, gdy zostaną pokazane, spraw, aby były ponownie widoczne. W ten sposób kontroluje się FOUT.