Hur du använder Google-teckensnitt i ditt nästa webbprojekt och varför du borde

Annons

Val av teckensnitt är ett integrerat designbeslut på vilken webbplats som helst, men för det mesta är vi nöjda med samma gamla serif och sans-serif-familj. Medan huvuddelen av text alltid borde vara något optimerat för läsbarhet såvida du inte vill ha läsare för att få huvudvärk kan titlar och framstående text vara ditt utrymme för att lägga till en unik design med något teckensnitt stil.

Läs vidare för att ta reda på hur du använder någon av Googles webbsnitt på din webbplats.

Bakgrund

Med CSS kan du ange en kedja med teckensnitt som ska användas om den föredragna inte är tillgänglig. Detta gör att du kan ha ett första val - kanske ett mindre vanligt men fritt teckensnitt; sedan ha säkerhetskopior på plats som alltid finns där med Windows eller Mac. Men i allmänhet kommer webbdesigners att hålla sig med beprövade typsnitt av familjkedjor som beskrivs av w3-skolor.

Tidigare, om ett annat teckensnitt önskades, tvingades designers att skapa bilder för texten istället - logotyp, rubriker etc. Nackdelarna där är:

• Bilder skalas inte upp bra.
• Bilder kan inte läsas av skärmläsare.
• Du kan inte markera texten i bilder.
• Sökmotorer kan inte "läsa" bilder.
• Laddning av bilder bromsar webbsidan.

Så finns det en bättre lösning? En som låter oss använda en universellt tillgänglig uppsättning gratis teckensnitt utan att ta till oss bilder?

Googles webbsnitt

Svaret kommer från Google. Google Web Fonts är i huvudsak en samling av (vid nuvarande räkning, 489) optimerade teckensnitt lagrade i molnet, som kan inbäddas i dina webbprojekt (eller till och med bara laddas ner för att användas på din dator).

Google Web Fonts-webbplatsen gör det dessutom enkelt att jämföra och välja och ger dig all den kod du behöver för att bädda in teckensnittet via Javascript eller CSS - mer om det senare.

Komma igång

Gå över till Webbteckensnittsplatsoch klicka börja välja teckensnitt att börja.

Gränssnittet är ganska självförklarande - till vänster kan du söka efter specifika nyckelord; och filtrera efter grundläggande typsnitt; eller filter för specifika faktorer som brevtjocklek. Fältet överst justerar förhandsgranskningstexten. Om du har ett specifikt stycke med text vill du testa det till exempel, växla till fliken avsnitt och klistra in texten.

Som jag nämnde är det bättre för dig att inte välja något för fint för huvudinnehållstexten, så håll dig till antingen serif- eller sans-serif-familjer om du verkligen vill söka något unikt där.

När du ser en du gillar, lägg bara till den i din samling.

Klicka på recension för att gå till granskningsläget och jämföra alla dina val.

I granskningsläget har du visat en mängd olika typsnitt och antingen ett stycke eller rubriktext. Systemet kommer också att göra ett intelligent val att visa dig beroende på det typiska användningsfallet för det typsnittet; men du kan ändra förhandsvisningsläget om du vill.

Rulla åt höger för att se andra teckensnitt i din nuvarande samling; Klicka på X längst upp till höger för att avvisa dem.

Provköra är ett särskilt intressant läge som kombinerar alla teckensnitt i din samling för att visa hur det kan se ut när det kombineras i en grundläggande sidlayout.

OK, vald. Hur använder jag dem?

Klicka på knappen när din samling har minskat recension knappen på den stora blå stapeln. Om du har gått överbord och inkluderat för många (verkligen, håll den till högst 2), varnar indikatorn för påverkan på sidbelastningen dig.

Bläddra ner för att få tag i relevant kod. Det finns tre val här:

• Standard (länk rel = metod): detta måste klistras in i HEAD-avsnittet på din webbplats, så du måste vara bekväm med HTML för att göra detta. För WordPress lägger du till det till header.php om du väljer det här sättet. Jag rekommenderar det inte.
• @importera: den här metoden går direkt i din stilarkfil, där vi ändå ska specificera typsnitt för olika sidelement, så jag rekommenderar det personligen. För WordPress-teman, placera det i style.css strax efter temainformationsavsnittet
• Javascript: självförklarande - placera koden var som helst i ditt tema. Fördelen med att använda denna metod är att teckensnittet kommer att laddas asynkront - webbplatsen kommer först att visas i fallbackteckensnittet, sedan byter när teckensnittet har laddats helt. Även om den första sidan laddningstiden är snabbare, kommer det att skapa en skurrande plötslig förändring för användaren som du kanske inte vill ha.

Det är steg 1. Steg 2 är att ange teckensnittet där du vill att det ska användas. Vi har inte utrymme för en fullständig CSS-tutorial här (jag föreslår dessa 5 CSS-inlärningssidor Topp 5 webbplatser för att lära sig CSS online Läs mer ; och min egen 5 babysteg i CSS-handledning 5 Babysteg för att lära sig CSS och bli en kick-ass CSS trollkarlCSS är de enskilt viktigaste förändringswebbsidor som har sett under det senaste decenniet, och det banade vägen för separationen av stil och innehåll. På det moderna sättet definierar XHTML den semantiska strukturen ... Läs mer ), men räcker med att säga att du kommer att justera någonting i ditt stilark som säger typsnittsfamilj, och se till att inkludera säkerhetskopieringsstilen som föreslagits av Google.

optimerad

Att använda ett icke-standardteckensnitt som användaren behöver ladda ner kommer att lägga till en liten tid på din sidbelastning - det är oundvikligt. Men ett typiskt webbteckensnitt från Google är cirka 100 kB - för jämförelse handlar det här om storleken på en medelstor jpeg-bild av god kvalitet. Liksom bilder kommer webbteckensnittet att lagras i användarens webbläsare, så att endast den inledande sidbelastningen kommer att försenas något.

Sammanfattning

Jag erkänner det - jag älskar verkligen teckensnitt. Jag förväntar mig som många av er, jag tenderar att horde dem på min hårddisk - bara för fall, du vet ?! Nu kan jag faktiskt använda några unika teckensnitt i mina webbprojekt - jag är upphetsad. Snälla du, försumma inte teckensnitten på din webbplats!

Om du har några frågor om hur du implementerar webbteckensnitt på din webbplats, fråga gärna i kommentarerna så ser jag om jag kan hjälpa till.