Jak połączyć czcionki Google z witrynami Tilda

Podłączanie czcionek Google poprzez przeszukiwanie biblioteki Tilda

Czytaj

Ręczne łączenie czcionek za pośrednictwem łącza z Google Fonts

Czytaj

Możliwe błędy podczas podłączania czcionek

Czytaj

Google Fonts to duża biblioteka darmowych czcionek, które można wykorzystać w dowolnym projekcie, także komercyjnym. W tym artykule opisano, jak dodać czcionki z tej biblioteki do użytku na swojej stronie internetowej.

Podłączanie czcionek z Google Fonts poprzez wyszukiwanie w bibliotece czcionek Tilda

Aby podłączyć czcionkę z serwisu Google Fonts, przejdź do sekcji „Ustawienia witryny” → „Czcionki” i kliknij przycisk „Ustawienia zaawansowane”.

Site Settings > Fonts: the "Advanced settings" button below the font preview slider.

Kliknij kartę Google Fonts, a następnie kliknij przycisk "Szukaj w czcionkach", aby uzyskać dostęp do biblioteki czcionek Google Fonts.

Site Settings → "Fonts" → "Google Fonts": the magnifying glass search icon next to the "HEADING FONT" field with the tooltip "Search in Fonts".

Pojawi się panel, w którym można wyszukać czcionkę według nazwy lub wybrać żądany styl czcionki - Serif, Sans Serif, Handwritten, Monospaced lub Display font (specjalna czcionka do dużych nagłówków lub elementów tekstowych).

Google Fonts directory page with font preview cards on the right and search, category, and language support filters on the left.

Po wybraniu żądanej czcionki można wybrać jej grubość.
Następnie należy kliknąć przycisk "Wybierz czcionkę" i opcjonalnie zaznaczyć pole wyboru, jeśli dana czcionka ma być używana zarówno w nagłówkach, jak i w tekście.

Font details page: the "Select font" button on the right and font weight checkboxes below.

Po wybraniu pola linku dla Google Fonts, odpowiedni link do jego połączenia zostanie wstawiony automatycznie. Zapisz zmiany. Teraz czcionka jest podłączona i możesz kontrolować jej parametry podczas edycji stron.

The "HEADING FONT" and "BODY TEXT FONT" fields under the "Google Fonts" tab in Site Settings > Fonts.

Łączenie czcionek poprzez wstawienie linku z Google Fonts

Otwórz stronę fonts.google.com i wybierz czcionkę, której chcesz użyć.

Kliknij przycisk "Pobierz czcionkę" → "Pobierz kod osadzania" → wybierz "Link" i wybierz style, których potrzebujesz.

On Google Fonts: the "+ Select this style" button next to a font style and the selected styles list in the "Selected family" sidebar on the right.

Skopiuj link do czcionki, czyli część kodu znajdującą się w cudzysłowie.

Link powinien wyglądać następująco:

https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap

https://fonts.googleapis.com/css2?family=Lora:wght@400..700

On Google Fonts: the "" radio button and font URL inside the embed code block in the "Selected family" sidebar on the right.

Przejdź do Tilda → Ustawienia witryny → Czcionki i kolory → Ustawienia niestandardowe → Czcionki Google i wklej link w polu "Link CSS".

Ważne: W polach "Nazwa rodziny czcionki nagłówka" i "Nazwa rodziny czcionki tekstu podstawowego" należy użyć dokładnej nazwy czcionki, tak jak jest ona nazywana w Google Fonts.

Site Settings > Fonts: the "Google Fonts" tab with the "CSS LINK", "HEADING FONT", and "BODY TEXT FONT" fields.

Opublikuj wszystkie strony witryny.

On the site dashboard: the "PUBLISH ALL PAGES" button at the top.

Czcionka jest podłączona.

Published website page showing a cover block with custom connected fonts applied to the heading and body text.

Jak dodać dwie różne czcionki Google Fonts

Kliknij przycisk "Pobierz czcionkę" dla dwóch różnych czcionek → "Pobierz kod osadzania" → wybierz "Link" i wybierz żądane style czcionek.

On Google Fonts: the "+ Select this style" button next to a font weight, and the selected font families in the "Selected families" sidebar on the right.

Skopiuj łącze CSS z obiema czcionkami.

Google Fonts: The "" option and the font URL inside the embed code in the "Selected families" sidebar.

Wklej link w polu Link CSS na karcie Czcionki Google.

Wklej pełną, dokładną nazwę pierwszej czcionki w polu Nazwa rodziny czcionek nagłówka i wklej pełną, dokładną nazwę innej czcionki w polu Nazwa rodziny czcionek tekstu.

Problemy z połączeniem czcionki

Najczęstszym powodem niewyświetlania czcionki jest to, że jedna czcionka jest połączona w Ustawieniach witryny, a inna czcionka jest przypisana do strony za pomocą paska narzędzi edytora tekstu. W takim przypadku należy zresetować przypisany styl, klikając przycisk "Wyczyść formatowanie" na górnym pasku narzędzi.

Przeczytaj więcej o innych błędach w artykule:

Czcionka łącząca kwestie i rozwiązania