Jak dodać czcionki internetowe Google do swojego bloga blogera

w tym samouczku pokażę Ci, jak przesłać dowolną czcionkę internetową Google do swojego bloga blogera. Jest kilka sposobów, aby to zrobić, ale tak to robię.

ten poradnik najlepiej nadaje się dla tych, którzy mają trochę wiedzy CSS. W tym samouczku używam „prostego” szablonu Bloggera.

oto przykład niestandardowej czcionki internetowej Google zainstalowanej na naszym szablonie Lemon Macaron.

niestandardowe czcionki google

Krok 1

zanim zaczniemy, zawsze polecam zrobienie kopii zapasowej bieżącego szablonu przed dokonaniem jakichkolwiek zmian (na wypadek, gdyby coś poszło nie tak).

możesz to zrobić na pulpicie nawigacyjnym, przechodząc do szablonu > Kopia zapasowa/Przywracanie (znajduje się w prawym górnym rogu) > Pobierz pełny szablon.

Krok 2

po wykonaniu kopii zapasowej szablonu kliknij Edytuj HTML (nadal jesteśmy w zakładce „szablon”).

edytuj html

Krok 3

pozostawiając tę stronę otwartą, otwórz nową kartę lub okno i przejdź do Witryny Google Web Fonts. Wyszukaj czcionkę, której chcesz użyć, i wybierz opcję szybkie użycie.

szybkie użycie

wybrałem czcionkę „Homar dwa”.

Krok 4

dla Sekcji 1: Wybierz Style, które chcesz, wybierz style, które mają być dostępne dla Twojej czcionki (Możesz wybrać wiele stylów). Pamiętaj, że wybranie zbyt wielu stylów może spowolnić twój blog. Wybrałem Normal 400, jak widać poniżej.

Wybierz Style

w sekcji 3: Dodaj ten kod do swojej witryny, kliknij kartę @import.

Importuj czcionkę

Krok 5

skopiuj informacje w polu @ import.

teraz, pozostawiając tę stronę otwartą, wróć do swojego bloga (gdzie wybrałeś Edytuj HTML). Wkleimy kod importu czcionek do szablonu.

Szukaj następującego tekstu znajdującego się na początku edytora szablonów (zwykle znajduje się w wierszach 13 lub 14):

 <b:skin>...</b:skin>
kod nadwozia

po rozwinięciu wklej informacje skopiowane z pola @ import w witrynie Google Web Fonts, następujący tekst:

/* Variable definitions

powinno to wyglądać tak:

zmienne

kliknij Zapisz szablon. Twoja czcionka została zaimportowana! Teraz możesz umieścić rodzinę czcionek w miejscu, w którym chcesz ją wyświetlić w szablonie.

Krok 6

szybko pokażę Ci, jak używać nowo zaimportowanej czcionki. W tym przykładzie użyję czcionki do tytułu mojego posta. W edytorze HTML wyszukaj:

h3.post-title, .comments h4

Usuń następujący wiersz:

font: $(post.title.font);

i zastąp go tekstem podanym w punkcie 4: Zintegruj czcionki z CSS w witrynie Google Web Fonts.

rodzina czcionek
font-family: 'Lobster Two', cursive;

powinno to wyglądać mniej więcej tak po wklejeniu informacji o rodzinie czcionek:

dodaj niestandardową czcionkę

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.