Natomiast instrukcja do wgrania własnej czcionki znajduje się tutaj >Grafika Centaura<.
I. Czcionka z Google fonts (podgląd - wygląd tytułu posta z mojego bloga)
1. Wchodzimy na stronę i wyszukujemy czcionkę, która pasuje nam najbardziej do bloga i jego contentu. Kiedy znajdziemy już pasującą czcionkę kilkamy "+" koło nazwy.
Na dole ekranu pojawi nam się ciemny, gruby pasek z napisem "1 Family Selected"(zależy od ilości wybranych czcionek).
Klikamy na niego i wysuwa nam się okno, w którym mamy podane wybrane czcionki, kod HTML do wrzucenia do naszego kodu HTML od szablonu oraz kod CSS, którym posługujemy się przy dostosowywaniu czcionki.
2. Kopiujemy cały kod (w moim przypadku wygląda on tak jak poniżej):
<link href='https://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet'>
Przed ">" dodajemy ukośnik "/" zamykający link.
!! Jeśli w kodzie z waszą czcionką występuje taki kod: &display=swap, usuńcie tę część kodu, ponieważ może wam podczas zapisywania szablon wyjść błąd.
!! Jeśli w kodzie z waszą czcionką występuje taki kod: &display=swap, usuńcie tę część kodu, ponieważ może wam podczas zapisywania szablon wyjść błąd.
3. Na blogu, na którym robimy szablon, wchodzimy w zakładkę "Motyw" i wklejamy, wcześniej skopiowany, kod z czcionką pod <head> w naszym kodzie HTML.
(ma to wyglądać tak jak na podglądzie)
4. Po tym jak już zapiszemy wszelkie zmiany w kodzie HTML, wracamy do strony Google Fonts i kopiujemy kod CSS:
h3.post-title a - link do posta na stronie głównej
h3.post-title - tytuł posta na całą szerokość posta i napis po wejściu w post
Kod css wygląda tak:
font-family: 'Great Vibes', cursive;5. Przechodzimy znów do zakładki "Motyw" i wchodzimy w Dostosuj>Zaawansowane>Dodaj arkusz CSS. W tym przykładzie pokażę wam jak dostosować czcionkę do tytułu posta. A więc selektory jakimi będziemy się posługiwać to:
h3.post-title a - link do posta na stronie głównej
h3.post-title - tytuł posta na całą szerokość posta i napis po wejściu w post
(będziemy robić coś takiego)
Kod css wygląda tak:
h3.post-title a, h3.post-title {Jeśli macie jakiekolwiek pytania, zapraszam do pisania ich w zakładce Pytania lub w komentarzach ;>
font-family: 'Great Vibes', cursive; *nasza czcionka*
font-weight: normal; *grubość czcionki*
text-align: center; *wyrównanie tekstu*
border-bottom: 1px solid #9136CC; *ramka dolna*
letter-spacing: .5px; *odstęp między literami*
font-size: 30px; *rozmiar czcionki*
color: #9136CC; *kolor czcionki*
}
Brak komentarzy:
Prześlij komentarz