Zmiana czcionki w szablonie

W tym artykule dowiesz się, jak w łatwy sposób zmienić czcionkę w szablonie.

Wybór czcionki

Wskazówka

Przy wyborze czcionki zwróć uwagę, aby miała licencję Apache 2.0

Wejdź tutaj i wybierz czcionkę, która Ci najbardziej odpowiada. Następnie kliknij w kafelek odpowiadający danej czcionce. Na potrzeby tego artykułu wybierzemy czcionkę Roboto. Następnie wybierz style, które Cię interesują. Po wybraniu przynajmniej jednego stylu pojawi się po prawej część kodu, którą należy skopiować do sekcji w szablonie. W naszym przypadku będzie to:


link rel="preconnect" href="https://fonts.googleapis.com">
link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

link rel="preconnect" href="https://fonts.googleapis.com">

link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

Kawałek niżej będzie podana linijka, którą trzeba wkleić w każdym miejscu, w którym występuje zapis z inną czcionką. W naszym wypadku będzie to:


font-family: 'Roboto', sans-serif;

font-family: 'Roboto', sans-serif;

Szafir

W pliku __layout.html znajdź znacznik head (3 linijka) i wklej w jego obrębie kod:


link rel="preconnect" href="https://fonts.googleapis.com">
link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

link rel="preconnect" href="https://fonts.googleapis.com">

link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

Znajdź plik scss/globals/_fonts.scss i usuń go. Następnie w pliku scss/desktop1.scss usuń linijkę:


@import 'globals/_fonts';

@import 'globals/_fonts';

W pliku scss/components/_collection-points.scss wyszukaj frazę ’SegoeUI’ i zamień wszystkie jej wystąpienia na ’Roboto’, sans-serif.

Następnie w plikach scss/globals/_globals1.scss, scss/globals/_globals2.scss i scss/globals/_header.scss wyszukaj frazę „SegoeUI” i zamień wszystkie jej wystąpienia w każdym z tych plików na ’Roboto’, sans-serif.

Na sam koniec w plikach scss/globals/_globals-m.scss, scss/globals/_globals2.scss, scss/globals/_header.scss i scss/partials/_order.scss wyszukaj frazę SegoeUI i zamień wszystkie jej wystąpienia w każdym z tych plików na ’Roboto’, sans-serif.

Wskazówka

Pamiętaj, że pliki należy zminifikować. O tym jak skompilować i zminifikować pliki dowiesz się z artykułu o kompilacji i minifikacji plików.

Zmiana czcionki w szablonie