Jak szybko i bezpiecznie dodać Google Fonts do projektu – ekspresowe wdrożenie fontów z Fontsource

Google Fonts są spoko (i inne open-source też)

Wiadomo, customowy font często robi różnicę i podnosi jakość strony o kilka poziomów.

Dodatkowo, wykorzystywanie do porzygu popularnych krojów jak Poppins czy Montserrat, skutecznie pomaga wyleczyć się z Google Fonts przynajmniej na jakiś czas.

Mimo to, fonty open-source, gdzie na czele stoi biblioteka Google’a, wciąż oferują świetne pozycje, idealne do prototypowania i MVP, a także często wykorzystywane na stronach produkcyjnych.

W dobie nowoczesnego JS-a podpinanie np. Google Fonts robi się z palcem w nosie.

Zobacz!

Spis treści

Fontsource, czyli Dzierżyciel Fontów

(czytam ostatnio po raz któryś trylogie Wspomnienie o przeszłości Ziemi i jestem właśnie na fragmencie, gdzie wprowadzony jest koncept Dzierżyciela Miecza, więc taki mały follow up – polecam, Cixin Liu koks)

Fontsource to platforma agregująca fonty open-source, która umożliwia instalację fontów na trzy sposoby:

1. przez pobranie paczki
2. przez CDN
3. przez npm

Mnie interesuje w zasadzie tylko 3 punkt.

Dlaczego Fontsource

Fontsource w łatwy i szybki sposób umożliwia self-hostowanie fontów, co jest podstawowym zabiegiem optymalizacyjnym, pozytywnie wpływającym na cyfrowe bebechy strony/apki.

Poza tym, w dobie coraz bardziej upierdliwych wytycznych RODO (piszę upierdliwych, bo o ile trzymam kciuki za ochronę prywatności, to w praktyce sprowadza się to na razie do zasypywania stron coraz większą ilością coraz bardziej inwazyjnych popupów), self-hostowane fonty to podstawa – w 2022 Niemiecki sąd nałożył karę 100 euro za podpięcie fontów z Google Fonts przez ich bezpośrednie podlinkowanie, co umożliwia Googlowi trackowanie np. adresu IP użytkownika strony.

Dlaczego jeszcze Fontsource jest spoko?

• dzięki wdrożeniu przez npm generalnie nie muszę przejmować się regułami @font-face, wystarczy zaimportować (sprawdź niżej) i tyle
• łatwe wersjonowanie fontów – fonty podlegają aktualizacjom, nad czym być może chcesz mieć kontrolę. Dzięki instalowaniu przez npm zarządzasz fontem jak każdą inną paczką, więc masz pełną swobodę w decydowaniu kiedy (i czy w ogóle) wykonać aktualizację
• Fontsource ma w swojej kolekcji różne pozycje open-source, nie tylko Google Fonts

Instalacja Fontów

Dłubię ostatnio przy blogu o pieskach i chcę dodać do projektu Playfair Display oraz Inter (przynajmniej na razie).

Zoba jakie to proste:

npm install @fontsource-variable/playfair-display
npm install @fontsource-variable/inter

Fonty, z których korzystam występują w wersji variable (tutaj więcej o tym, czym są variable fonts), dlatego wystarczy, że po instalacji zaimportuję je w taki sposób:

import '@fontsource-variable/playfair-display';
import '@fontsource-variable/inter';

Gdybym nie korzystał z variable fonts, to musiałbym dodać każdą wagę, którą chcę wykorzystać:

import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/600.css';
import '@fontsource/roboto/700.css';

Potem wystarczy dodać odpowiednią regułę (tam gdzie trzeba) i gotowe.

body {
	font-family: "Inter", sans-serif;
}