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.
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”).
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.
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.
w sekcji 3: Dodaj ten kod do swojej witryny, kliknij kartę @import.
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>
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:
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.
font-family: 'Lobster Two', cursive;
powinno to wyglądać mniej więcej tak po wklejeniu informacji o rodzinie czcionek:
