Skrevet d. 7. juli 2022 af Lennart Christensen

Hvorfor kan jeg ikke sætte flere Google Fonts i kø i WordPress functions.php med wp_enqueue_style?

For at kalde scripts i WP bruger man wp_enqueue_style og det kan man med fordel også gøre når man kalder en Google Font-fil eksternt. Til strengen tilføjer jeg normalvis en defineret værdi (THEME_VERSION) som så tilføjes ‘ver’ til strengen. WordPress laver så en versionsnummeret for stylesheetet, som gør at versionsnummer tilføjes til URL’en med henblik på cache-busting. Altså det er en en unik filversionsidentifikator som fortæller browseren, at en ny version af filen er tilgængelig. Jeg bruger somsagt tema versionsnummer som indikator i de temaer jeg opbygger. Man kan også sætte version til false, og så tilføjes der automatisk et versionsnummer svarende til den aktuelle installerede WordPress-version. Hvis den er sat til null, tilføjes der ingen version.

	wp_enqueue_style('google_font', 'https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:[email protected];700&family=Roboto:ital,[email protected],400;0,700;1,400;1,700&display=swap',[], THEME_VERSION); // theme vers.

	wp_enqueue_style('google_font', 'https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:[email protected];700&family=Roboto:ital,[email protected],400;0,700;1,400;1,700&display=swap',[], false); // WP version

Jeg lagde mærke til at der var fejl i kaldet når jeg inkluderede flere skrifttyper i samme kald. Fejlen viste sig ofte ved at den kun hentede den ene skrifttype. Årsagen viste sig at noget at gøre med hvordan WordPress Core analyserer forespørgselsparametre på og i dette tilfælde det “?ver” som blev tilføjer til strengen. For da der er tilføjet flere forespørgselsparametere, så bliver den ene fjernet. Det kan dog godt lade sig gøre med en. Altså det er kun når der er flere forespørgselsparametre (altså f.x ? & &), så fejler den og foretrækker at tilføje ‘ver’ fremfor første forespørgselsparameter, hvilket gør at den første skrifttype ikke hentes.

En workaround i den nuværende løsning er derfor at sende “null” til versionsparameteren for at få WordPress til ikke at tilføje et “ver” til URL’en.

wp_enqueue_style('google_font', 'https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:[email protected];700&family=Roboto:ital,[email protected],400;0,700;1,400;1,700&display=swap',[], null); // Wordaround

I gamle dage der så Google Fonts scripts ud på en anden måde og hver font var adskilt med et “|”, hvilket gjorde at der kun var et forespørgselsparameter, hvilket umiddelbart ikke gav de samme udfordringer. (F.eks.: https://fonts.googleapis.com/css?family=Fuzzy+Bubbles|Roboto&display=swap)

Alternativt kan man selv downloade filerne og hoste skrifttyperne på eget site eller via et CDN. Det er også et performance boost i mange tilfælde. Google Fonts er open source Men tjek lige licenserne for en sikkerhedsskyld inden du downloader 🙂