ska man hålla sig borta från @fontface?

Trädvy Permalänk
Medlem
Registrerad
Aug 2011

ska man hålla sig borta från @fontface?

Jag tycker det är svårt att få en överblick. På många auktoritativa webutvecklingssidor (alistaprt, csstricks etc) har det malts på ordentlilgt om problemen med @fontface. Som jag förstår det det är det främst olika typer av tidsfördröjningar i olika browsers medan fonten laddas första gången, i värsta fall blir man utan text helt och hållet. Jag kan inte citera nån men har fått intrycket att det föredras att man använder fonter från "fonthostare" som typekit eller googlefonts för då då laddas fonterna annorlunda (javascript/css) och folk verkar hurra för att de inte behöver använda @fontface längre.

1) Har jag förstått det rätt?
2) Bör jag således välja en font till mitt nästa projekt som jag kan ladda från t.ex. typekit och inte måste hosta själv?

Trädvy Permalänk
Medlem
Plats
Örebro
Registrerad
Mar 2011
Skrivet av pigge_85:

Jag tycker det är svårt att få en överblick. På många auktoritativa webutvecklingssidor (alistaprt, csstricks etc) har det malts på ordentlilgt om problemen med @fontface. Som jag förstår det det är det främst olika typer av tidsfördröjningar i olika browsers medan fonten laddas första gången, i värsta fall blir man utan text helt och hållet. Jag kan inte citera nån men har fått intrycket att det föredras att man använder fonter från "fonthostare" som typekit eller googlefonts för då då laddas fonterna annorlunda (javascript/css) och folk verkar hurra för att de inte behöver använda @fontface längre.

1) Har jag förstått det rätt?
2) Bör jag således välja en font till mitt nästa projekt som jag kan ladda från t.ex. typekit och inte måste hosta själv?

Ena laddar från servern och andra från en extern källa. Font-face möjliggör att du kan använda en font som det vanligtvis inte finns support för. Vanligtvis när du sätter en font-family på ett element har du fonts att falla tillbaka på om din font inte laddar eller visas korrekt. Detta gäller även när du använder en font från t.ex. googlefonts.

p { font-family: DinFont, Georgia, Serif; }

Det är en petitess som inte spelar någon i min mening. Gör det du känner dig bekvämast med, att ladda från en extern källa är smidigare och bloatar inte din css-fil.

Trädvy Permalänk
Medlem
Registrerad
Aug 2011
Skrivet av debben:

Ena laddar från servern och andra från en extern källa. Font-face möjliggör att du kan använda en font som det vanligtvis inte finns support för. Vanligtvis när du sätter en font-family på ett element har du fonts att falla tillbaka på om din font inte laddar eller visas korrekt. Detta gäller även när du använder en font från t.ex. googlefonts.

p { font-family: DinFont, Georgia, Serif; }

Det är en petitess som inte spelar någon i min mening. Gör det du känner dig bekvämast med, att ladda från en extern källa är smidigare och bloatar inte din css-fil.

Jag hade fått för mig att 3:e-part-hostade fonter (google, typekit etc) inte använde sig av @fontface. Att @fontface var typ generation 1 av webbfonter men att vi nu är i generation 2 av webbfonter när man bara länkar in dem med en <link> i <head>)... men det hade jag kanske fått om bakfoten?

Trädvy Permalänk
Medlem
Plats
Arboga
Registrerad
Jan 2002

@font-face används för att deklarera fonten, det du lägger i headern är oftast bara en extern css som innehåller själva deklarationerna.

Skickades från m.sweclockers.com

Intel Core i7 6700K | Gigabyte Z170X-UD3 | Corsair Vengeance LPX 16GB DDR4 2400Mhz | EVGA GTX 980Ti Hybrid | Samsung 950 PRO 256GB | Noctua NH-D15 | EVGA G2 750 | Fractal Design Define R5

Trädvy Permalänk
Medlem
Plats
Örebro
Registrerad
Mar 2011
Skrivet av pigge_85:

Jag hade fått för mig att 3:e-part-hostade fonter (google, typekit etc) inte använde sig av @fontface. Att @fontface var typ generation 1 av webbfonter men att vi nu är i generation 2 av webbfonter när man bara länkar in dem med en <link> i <head>)... men det hade jag kanske fått om bakfoten?

Skrivet av Zajin:

@font-face används för att deklarera fonten, det du lägger i headern är oftast bara en extern css som innehåller själva deklarationerna.

Skickades från m.sweclockers.com

Som @Zajin säger. Det du tjänar på (egentligen) genom att använda externa fonter är browser kompatibilitet. Dvs, din css blir inte bloatad. @font-face kräver flera deklarationer för kompatibilitet till alla browsers.

I vissa fall om man pratar om responstider och så vidare, kan det vara värt att köra med fonts från din egen server. För hobbyprojekt spelar det ingen större roll.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Nov 2013

Skulle nog varken säga bu eller bä. Det som är mest viktigt är att användaren inte upplever att sidan blir långsam och ger en tråkig upplevelse. Om man tittar på Google så är de ju kära i CDN och liknande tjänster så om man går på den tråden så är ju det givet. Men tycker inte att det är värt att ha en extern hosting endast för en sådan sak om du använder en custom font.
Det handlar om upplevelse och att inte låta användaren vänta. Dvs. så länge användaren inte kan använda sidan kommer de att misstycka. Kolla denna klipp från NordicJS2015 https://www.youtube.com/watch?v=EVEiIlJSx_Y
Han snackar mycket kring det.

Titta mer på vad som händer om inte klienten laddar ner font-filerna (se Ad-blocker m.m) dvs inte laddar ner resurser som inte "behövs". Ex. Font-awesome (ikonpaket) kan skapa visuella problem på en site om klienten inte laddar ner dem och kanske gå mot en SVG/BASE64 riktning. Dvs. ser över fallback m.m
Sen är taggarna "async" och "defer" väldigt bra i många avseenden (http://www.w3schools.com/tags/att_script_defer.asp, http://www.w3schools.com/tags/att_script_async.asp) som fungerar bra för CSS och JS. Det ger ett asynkront beteende och laddas sist i processen. Dvs. när ex. fonten laddas ner så hoppar sidan om från din "fallback" font till din custom.

Vet inte om detta gav dig svar eller skapade fler frågor.

Lycka till.

/ L

INTEL CORE I7 5960X 3 GHZ 20MB S-2011-3 @ 4.5G, ASUS RAMPAGE V EXTREME, CORSAIR 16GB DDR4 DOMINATOR 3000MHZ, CORSAIR 850W, Asus GTX980ti OC, FRACTAL DESIGN R4 | Astro gaming A50