Inte bara kopiera @font-face ut av Google Fonts Webbadresser

0
31

Jag tror inte att detta är en epidemi eller något, men jag har sett det göras ett par gånger och även verkat för. Detta är vad jag menar…

Du går till Google Fonts och välja ett teckensnitt som Öppna Sans, och det ger dig antingen en <link> eller en @import med en URL som finns där redo att detta typsnitt för användning på din webbplats.

Du kan ta en titt in där och se vad det tillbaka…

Det är bara vissa @font-face förklaringar, naturligtvis!

Nu din prestation-sinnade hjärnan drar igång. Vänta. Så, jag gör en HTTP-förfrågan för detta stylesheet, och då det gör att fler HTTP-begäranden för de woff2 filer är det att koppla upp. Skruven mitt man är här, varför inte bara kopiera de @font-face-block rätt ut härifrån och använda dem.

Kan du! Men!

Problemet är att Google inte fancy Google saker här och innehållet i den ursprungliga formatmallen ändras baserat på webbläsaren som efterfrågar det. Att skärmdumpen ovan är Chrome 66. Här är Firefox 20 i Windows 7:

Det är olika! Det är endast fick woff, inte woff2. Om vi öppnar URL: en i internet explorer 8, vi skulle få en @font-face-block som innehåller eot-format!

Poängen är, vad som URL ger är mycket specifika för den aktuella webbläsaren behov. Det är en ganska häftig sak att abstrakt bort och inte oroa dig. Bör nya webbläsare har nya format och nya CSS-syntax som behövs, det ska bara följa med på resan.

Inte för att Google Teckensnitt är perfekt med det här. Till exempel, genom att inte styra ditt eget @font-face-block, du kan inte dra nytta av font-display vilket är en skam. Kanske vi kommer att få det en dag, eller kanske är det värt att själv är värd ditt Google Fonts, vilket är en helt annan sak att vi kommer att få in på en dag.

Jetpack WordPress plugin som körs på denna webbplats, driver inte bara relaterade inlägg nedan, men säkerhet och backup, Wiki-stöd, sök på sajten, kommentera form, sociala nätverk, och mycket mer!