Dodawanie czcionek
W AMP, aby maksymalnie skrócić czas ładowania dokumentów, nie można dołączać zewnętrznych arkuszy stylów. Jest jednak jeden wyjątek od tej reguły — czcionki.
Niestandardowe czcionki można osadzić w stronie AMP na dwa sposoby:
- Za pomocą znacznika
<link>(tylko dostawcy czcionek z listy dozwolonych). - Poprzez użycie reguły CSS
@font-face: nie ma żadnych ograniczeń, dozwolone są wszystkie czcionki.
W tym samouczku użyjemy znacznika <link>, aby dodać czcionki do naszej strony. Dodaj link do arkusza stylów w sekcji <head>, aby zażądać czcionki Raleway:
<link
rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Raleway"
/>
Teraz zaktualizuj selektor CSS body, aby dodać odnośnik do czcionki Raleway:
body {
width: auto;
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
}
Odśwież stronę i sprawdź jej nowy wygląd. Ponadto należy sprawdzić wynik walidatora AMP. Nie powinno być żadnych błędów dotyczących tego żądania zewnętrznego arkusza stylów.
Czcionki internetowe mogą mieć negatywny wpływ na działanie witryny internetowej, nawet w przypadku ogólnie szybkich witryn AMP. Użyj właściwości CSS
font-display w celu zoptymalizowania sposobu ładowania czcionek. Twój artykuł informacyjny AMP jest gotowy! Oto, jak powinien wyglądać: