Customowe fonty przy ustawionej właściwości font-display: swap są dobrym rozwiązaniem, ale mogą generować przesunięcie układu (CLS), gdy fonty są ładowane zbyt późno lub są zbyt duże. Powoduje to tzw. flash of unstyled text (FOUT)1.
W rozwiązaniu tego problemu może Ci pomóc zastosowanie CSS Font Loading API, dzięki któremu poznasz moment, kiedy fonty zakończyły się ładować.
Dodatkowo możesz spróbować dostosować domyślny, „fallbackowy” krój czcionki do fontu, jaki chcesz wdrożyć. Z pomocą przychodzi oczywiście CSS z ogromną liczbą właściwości, którą możesz się „bawić”:
- grubością,
- odstępami między literami i wyrazami,
- rozmiarem,
- wysokością.
Im bardziej dostosujesz krój czcionki do fontu, tym mniejsze ryzyko przesunięcia układu i mniejszy wpływ na CLS.
Dostosowywanie w ten sposób kroju czcionki może być bardzo trudne. Dlatego dobrym pomysłem jest zrobienie screenshota z treści po zastosowaniu docelowych fontów i ustawienie tego zdjęcia tymczasowo jako tło, na którym dodajesz ten sam tekst w formie tekstowej, bez włączonych fontów. Dzięki temu będziesz miał nałożone na siebie dwie warstwy i z łatwością dostosujesz krój czcionki.
Innym rozwiązaniem jest narzędzie „Font style matcher”, które za pomocą suwaków generuje odpowiednie style dla wybranego fontu: https://meowni.ca/font-style-matcher/
Osobna kwestia to ustalenie, czy rzeczywiście chcesz ładować plik z fontami, skoro osiągnąłeś podobny efekt za pomocą samych stylów CSS.