Pierwsze kroki z interfejsem Google Fonts API

Z tego przewodnika dowiesz się, jak dodawać czcionki do stron za pomocą interfejsu Google Fonts API. Nie musisz programować: wystarczy, że dodasz do dokumentu HTML specjalny link do arkusza stylów, a następnie oznaczysz czcionkę w stylu CSS.

Krótki przykład

Oto przykład. Skopiuj ten kod HTML i wklej go do pliku:

<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>

Następnie otwórz plik w nowoczesnej przeglądarce. Powinna wyświetlić się strona z takimi tekstem o nazwie pomarańczowy:

Tworzenie piękna internetu

Jest to zwykły tekst, więc możesz zmienić jego wygląd za pomocą CSS. Spróbuj dodać cień do stylu z poprzedniego przykładu:

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

Pod tekstem powinien być widoczny cień:

Tworzenie piękna internetu

A to dopiero początek działań, jakie można zrobić dzięki interfejsowi Fonts API i CSS.

Opis

Aby zacząć korzystać z interfejsu Google Fonts API, wystarczy 2 kroki:

  1. Dodaj link do arkusza stylów, aby poprosić o wybrane czcionki internetowe: 

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

  2. Nadaj elementowi styl żądaną czcionkę internetową, korzystając z arkusza stylów:

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

    za pomocą stylu wbudowanego w sam element: 

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

Listę dostępnych czcionek znajdziesz na stronie Google Fonts.

Określanie rodzin czcionek i stylów w adresie URL arkusza stylów

Aby określić adres URL, którego chcesz użyć w linku do arkusza stylów, zacznij od podstawowego adresu URL interfejsu Google Fonts API:

https://fonts.googleapis.com/css

Następnie dodaj parametr adresu URL family= z co najmniej 1 nazwą rodziny czcionek i stylem.

Aby na przykład wysłać żądanie czcionki Inconsolata:

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

Aby poprosić o wiele rodzin czcionek, rozdziel nazwy pionową kreską (|).

Aby na przykład zażądać czcionek Tangerine, Inconsolata i Droid Sans:

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

Żądanie wielu czcionek umożliwia wykorzystanie wszystkich tych czcionek na stronie. (Nie przesadzaj z zapasem – większość stron nie potrzebuje bardzo wielu czcionek, a zbyt duża liczba czcionek może spowolnić wczytywanie stron).

Interfejs Google Fonts API domyślnie udostępnia standardową wersję żądanych czcionek. Aby poprosić o inne style lub wagi, do nazwy czcionki dodaj dwukropek (:), a po nim listę stylów lub wag oddzielonych przecinkami (,).

Na przykład:

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

Informacje o tym, jakie style i gruby są dostępne w przypadku danej czcionki, znajdziesz na jej liście w Google Fonts.

Do każdego stylu możesz podać pełną nazwę lub skrót. W przypadku wag możesz też podać wagę liczbową:

Styl Specyfikacje
kursywa italic lub i
pogrubienie bold lub b albo waga liczbowa, np. 700
pogrubiona kursywa bolditalic lub bi

Aby na przykład zastosować pogrubienie do Cantarell i Droid Serif, możesz użyć dowolnego z tych adresów URL:

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

Użyj wartości Font-display

font-display pozwala określić, co ma się stać, gdy czcionka ma być niedostępna. Należy zazwyczaj podać wartość inną niż domyślna wartość auto.

Przekaż odpowiednią wartość w parametrze display ciągu zapytania:

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

Określanie podzbiorów skryptów

Niektóre czcionki z katalogu czcionek Google obsługują wiele skryptów (np. alfabet łaciński, cyrylica i grecki). Aby określić, które podzbiory mają być pobierane, do adresu URL należy dołączyć parametr podzbioru.

Aby np. zażądać podzbioru cyrylicy czcionki Roboto Mono, adres URL będzie wyglądać tak:

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

Aby wysłać żądanie greckiego podzbioru czcionki Roboto Mono, adres URL wygląda tak:

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

Aby zażądać zarówno podzbioru greckiego, jak i podzbioru cyrylicy czcionki Roboto Mono, adres URL będzie wyglądać tak:

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

Podzbiór łaciński jest zawsze uwzględniany, jeśli jest dostępny i nie trzeba go określać. Pamiętaj, że jeśli przeglądarka klienta obsługuje zakres Unicode (http://caniuse.com/#feat=font-unicode-range), parametr podzbioru jest ignorowany. Przeglądarka wybierze jeden z podzbiorów obsługiwanych przez czcionkę, aby pobrać to, czego potrzebuje do wyrenderowania tekstu.

Pełną listę dostępnych czcionek i podzbiorów czcionek znajdziesz na stronie Google Fonts.

Optymalizacja żądań czcionek

Jeśli chcesz użyć czcionki internetowej w witrynie lub aplikacji, często wiesz z wyprzedzeniem, jakie litery będą potrzebne. Często dzieje się tak, gdy używasz czcionki internetowej w logo lub nagłówku.

W takich przypadkach możesz podać wartość text= w adresie URL żądania czcionki. Pozwoli to Google zwrócić plik czcionki zoptymalizowany pod kątem Twojego żądania. W niektórych przypadkach może to zmniejszyć rozmiar pliku czcionek nawet o 90%.

Aby korzystać z tej funkcji, dodaj atrybut text= do żądań do interfejsu Google Fonts API. Jeśli na przykład używasz nazwy Inconsolata tylko jako tytuł bloga, możesz podać sam tytuł jako wartość właściwości text=. Prośba może wyglądać tak:

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

Tak jak w przypadku wszystkich ciągów zapytań, wartość należy zakodować w adresie URL:

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

Funkcja ta działa również w przypadku czcionek międzynarodowych, umożliwiając określanie znaków UTF-8. Na przykład ŚwietneHola! jest reprezentowana jako:

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

Włączanie efektów czcionek (beta)

Tworząc nagłówki lub wyświetlane teksty w witrynie, warto nadać tekstowi styl, który będzie ozdobiony. Aby ułatwić Ci pracę, Google udostępnia kolekcję efektów czcionek, których możesz użyć do wygenerowania atrakcyjnego tekstu wyświetlanego bez większego wysiłku. Na przykład:

To jest efekt czcionki.

Aby skorzystać z tej funkcji w wersji beta, wystarczy dodać effect= do żądania do interfejsu Google Fonts API i dodać odpowiednią nazwę klasy do elementów HTML, które mają zostać zmienione. W powyższym przykładzie użyliśmy efektu czcionki shadow-multiple, więc żądanie wyglądałoby tak:

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

Aby użyć tego efektu, dodaj do elementów HTML odpowiednią nazwę klasy. Odpowiednia nazwa klasy to zawsze nazwa efektu poprzedzona ciągiem font-effect-. Dlatego nazwa klasy dla shadow-multiple będzie wyglądać tak: font-effect-shadow-multiple:

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

Możesz zażądać wielu efektów, rozdzielając ich nazwy pionową kreską (|).

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

Oto pełna lista wszystkich oferowanych przez nas efektów czcionek:

Efekt Nazwa interfejsu API Nazwa zajęć Pomoc
Anglif anaglyph font-effect-anaglyph Chrome, Firefox, Opera, Safari
Znak ceglany brick-sign font-effect-brick-sign Chrome i Safari
Odbitka na płótnie canvas-print font-effect-canvas-print Chrome i Safari
Pęknięcie crackle font-effect-crackle Chrome i Safari
Osuszanie decaying font-effect-decaying Chrome i Safari
Zniszczenie destruction font-effect-destruction Chrome i Safari
Stresowany distressed font-effect-distressed Chrome i Safari
Twarde drewno distressed-wood font-effect-distressed-wood Chrome i Safari
Embos emboss font-effect-emboss Chrome, Firefox, Opera, Safari
Straż pożarna fire font-effect-fire Chrome, Firefox, Opera, Safari
Animacja przedstawiająca pożar fire-animation font-effect-fire-animation Chrome, Firefox, Opera, Safari
Ekspresyjne fragile font-effect-fragile Chrome i Safari
trawa grass font-effect-grass Chrome i Safari
Lód ice font-effect-ice Chrome i Safari
Mitoza mitosis font-effect-mitosis Chrome i Safari
Neon neon font-effect-neon Chrome, Firefox, Opera, Safari
Obrys outline font-effect-outline Chrome, Firefox, Opera, Safari
Uderzanie zieleni putting-green font-effect-putting-green Chrome i Safari
Miękka stal scuffed-steel font-effect-scuffed-steel Chrome i Safari
Wiele cieni shadow-multiple font-effect-shadow-multiple Chrome, Firefox, Opera, Safari
Rozdrobnione splintered font-effect-splintered Chrome i Safari
Statyczny static font-effect-static Chrome i Safari
Czyszczenie kamienia stonewash font-effect-stonewash Chrome i Safari
Trójwymiarowe 3d font-effect-3d Chrome, Firefox, Opera, Safari
Trójwymiarowa swobodna 3d-float font-effect-3d-float Chrome, Firefox, Opera, Safari
Stara klisza vintage font-effect-vintage Chrome i Safari
Tapeta wallpaper font-effect-wallpaper Chrome i Safari

Styl czcionek można zmienić na wiele innych sposobów, a dzięki CSS można wiele osiągnąć. Mamy dla Ciebie tylko kilka wskazówek, które ułatwią Ci start. Aby znaleźć więcej pomysłów, wyszukaj w Google „efekty tekstowe CSS” i przejrzyj wiele pomysłów, które są już dostępne w internecie.

Więcej informacji