När Google Web Fonts släpptes för första gången skrev vi ett snabbt genomgång. Sedan dess har tjänsten blivit helt omarbetad och det är dags att genomgå en grundlig genomgång från början.
Följ med oss när vi börjar helt och hållet och diskutera vad tjänsten Google Web Fonts är och hur du får den upp och köra på din webbplats idag. Ge oss några minuter av din tid och vi öppnar dig till den fantastiska världen av fantastiska gratis webbfonter.
Varför Google webbfonter?
En och en gång var webben fylld av tråkiga, standardfonter. För att säkerställa kompatibilitet över det största antalet användare, var webdesigners tvungna att begränsa sina valfria textfältval till de typsnitt som vanligtvis finns på de flesta maskiner.
? Font licensiering kan verkligen vara en röra så att direkt inbäddning av slumpmässiga teckensnitt till en webbsida är inte alltid en bra idé.?Detta var inte det värsta i världen för konsekvens och läsbarhet, men det begränsade verkligen den typografiska kreativiteten hos webben som helhet. Med CSS3 började de flesta webbläsare stödja @ font-face, ett sätt att servera anpassade teckensnitt till en webbsida. Tyvärr kan font licensiering verkligen vara en röra så att direkt inbäddning av slumpmässiga teckensnitt till en webbsida är inte alltid en bra idé.
Webtextjänster
Som en lösning uppstod ett antal webbfontstjänster för @ font-face-webben, den bästa och mest kända som är sannolikt Typekit. Typekit hade en vacker lösning: Bläddra igenom deras omfattande bibliotek med teckensnitt, så kopiera och klistra in lite kod för att implementera dem på din webbplats.
? Typekit hade en vacker lösning: Bläddra igenom deras omfattande bibliotek med teckensnitt, så bara kopiera och klistra in någon kod för att implementera dem på din webbplats. ?Det enda problemet med tjänster som detta är att kostnadsstrukturen, $ 49- $ 99 om du vill ha mer än två platser, förbjuder många designers att använda dem. Google kom med och gjorde vad de alltid gör: tog en högsta service och erbjöd den gratis.
Kvaliteten och variationen av de typsnitt som du hittar på premiumtjänster som Typekit är förståeligt mycket bättre än vad du kan få gratis, men om de bara inte är i budgeten är Google Web Fonts absolut din bästa satsning.
Poängen
Här är kärnan: Google Web Fonts är ett helt gratis och super enkelt sätt att implementera icke-standardiserade teckensnitt på din webbplats i ett korrekt licensierat och brett stödjande sätt.
Möt Google Web Fonts
Nu när du får idén är det dags att gå över och ta en titt på sidan Google webbfonter.
Det du ser här är mycket som en vanlig typsnittsprogram. Det är i grunden en stor lista över alla tillgängliga teckensnitt med olika förhandsgranskning och filtreringsfunktioner. Observera att från och med det här skrivandet finns det 506 separata teckensnittsfamiljer i biblioteket. Inte illa för en gratis tjänst!
Anpassa din förhandsvisning
Den största delen av denna sida tas upp av förhandsgranskning av teckensnitt. När du väljer ett typsnitt är det absolut nödvändigt att se det på samma sätt som hur du ska implementera det. Vissa teckensnitt ser bra ut för rubrikerna men helt vred som kroppskopia.
? När du väljer ett typsnitt är det absolut nödvändigt att se det på samma sätt som hur du ska implementera det. ?Lyckligtvis tillåter Google Web Fonts dig att anpassa förhandsgranskningen för att matcha ditt användarfall. Du kan ange anpassad förhandsgranskningstext och ändra förhandsgranskningsstorleken.
När jag verkligen vill titta på en typsnitt som jag ska använda för en rubrik, tycker jag om att använda "Word"? se. Gridlayouten här är också det bästa sättet att snabbt bläddra igenom massor av teckensnitt.
Den viktigaste delen är att se till att du förhandsgranskar vilken kroppskopia som du ska använda i stycksvy. Det är ärligt en bra idé att undvika att använda en anpassad typsnitt om du har mycket kroppskopia, men det finns gott om legitima användarfall här, så var försiktig. Var försiktig.
Sortering och filtrering
Som vi såg ovan finns över femhundra fontfamiljer att siktas igenom. Det kan vara en brutal uppgift om du bara rullar igenom dem en efter en, men filtrerings- och sorteringsalternativen här kan dramatiskt förenkla denna process och hjälpa dig att finpeka på exakt vad du behöver.
Sortering efter popularitet och datum tillagd
En snabb sak som du kan göra direkt är att ändra sorteringsmetoden. Jag gillar att se vad som är populärt eller nyligen lagt till. Det är också till hjälp att du enkelt kan sortera efter hur många stilar som finns i familjen. Detta gör att du kan ta en mångsidig familj som kan användas i olika bredder och stilar.
Filtrering efter egenskaper och stil
Det mest användbara sättet att förbättra dina resultat är överlägset att använda filtreringsalternativen. Det här är särskilt användbart om du vet vilken typ av typsnitt du vill implementera. Om du till exempel vet att du vill ha ett handskriven typsnitt kan du avaktivera alla andra typer från resultaten.
Det slutar inte där, Google går ännu längre genom att du kan anpassa resultatet baserat på teckens tjocklek, snedstreck och bredd. Det är en riktigt cool funktion som jag aldrig sett någon annanstans.
Välja typsnitt
Google har skapat ett ganska mångsidigt system för att välja och implementera olika typsnitt, vilket innebär att det finns ett antal sätt att gå på olika uppgifter. Det finns ingen rätt eller fel här, bara vad som fungerar bäst för dig och ditt unika arbetsflöde.
Ett sätt att arbeta är att gå igenom och slå på? Snabb användning? knappen när du ser ett teckensnitt som du gillar. Detta tar dig till en sida som visar hur du använder det teckensnittet, som vi ser senare. Du kan också använda "Pop out? knappen för att se ett informationsfönster som berättar mer om teckensnittet.
Om du ska använda flera teckensnitt, är det mest effektiva sättet att arbeta att använda "Collection"? funktion. När du hittar olika teckensnitt som du vill använda, klicka på? Lägg till i samling? knappen för att se teckensnittet som läggs till i listan längst ner på skärmen.
Härifrån kan du? Bookmark? eller? ladda ner? din samling med kontrollerna längst upp på skärmen, eller välj mellan "Review"? och? använda? knappar längst ner på skärmen.
Använda teckensnitt
När du är redo att se dessa teckensnitt i åtgärd, hoppa över till "Använd? flik. Det första du ser här är en lista över teckensnitt i din samling med möjlighet att aktivera och inaktivera dina olika val. Det finns också en praktisk mätare som uppskattar vilken inverkan dessa teckensnitt kommer att ha på din sidlastningstid.
Härifrån är genomförandet av teckensnitt lika enkelt som att kopiera och klistra in någon kod. Du har tre alternativ att välja mellan för den inbäddade inbäddat: Standard, @import och JavaScript.
- Standard - Det här är en standard stilarklänk som du placerar i huvuddelen av din HTML-fil. Detta sparar dig steget att lägga till @import-regeln i din CSS-fil eftersom du faktiskt lägger till i ett stylesheet som redan har kastat in det.
- CSS - Om du inte vill länka till det automatiskt genererade stilarket i din rubrik, använd sedan CSS @ import-regeln som visas på den andra fliken.
- JavaScript - Koden här är en del av WebFont Loader, som är ett JavaScript-bibliotek som faktiskt utvecklades av både Google och Typekit som ger dig större kontroll över typsnittets laddning. Du kan läsa mer om det här.
När du väl har importerat teckensnitten korrekt, är allt som finns kvar att implementera teckensnitt i din CSS-typfamilj precis som du alltid skulle. Klippet för detta ligger nära botten:
Ett exempel
Nu när vi förstår alla de olika fragmenten och vad de gör kommer jag att gå igenom hur jag brukar implementera en samling typsnitt. Det första du vill göra är att ta tag i HTML-kodet och kasta nära toppen av HTML-koden så här:
Hoppa sedan vidare till CSS. Vad vi ska göra här är ganska annorlunda än vad vi såg ovan. Här är koden:
Först använde jag CSS-teckensnittet för att spara lite utrymme. Detta tillåter oss att skriva in alla kännetecken för vårt teckensnitt på en enda linje som är bra.
Det första värdet du ser är? 400? i både h1 och stycket. Jag satte in detta för att se till att webbläsaren visar dessa teckensnitt i de vikter som de var avsedda att visas på, och vi såg tidigare att den avsedda vikten är 400.
Därefter ställde jag in den teckensnittstyp som följde men linjens höjd. Observera att jag inte använde någon slags enheter för linjens höjd, det här är ett snyggt trick som kommer att tillämpa en relativ linjehöjd som ändras med teckenstorleken.
Slutligen lägger jag in Google-teckensnitt och använder mina egna säkerhetskopior eftersom jag inte tror att du någonsin ska använda standardwebbläsarsval för? Cursive? vilket är vad Google använder i sitt utdrag.
Det är verkligen allt vi behöver göra. Ladda upp ditt live-förhandsgranskning i en webbläsare och du ska se att dina anpassade teckensnitt visas perfekt.
Använd det!
Du har just lärt dig allt om hur du använder Google Web Fonts, nu är det dags att komma dit och använda den här kunskapen på din egen webbplats. Bläddra igenom de tillgängliga teckensnitt och tänk på hur du kan förbättra typografi i dina projekt. Kom alltid ihåg att med anpassade teckensnitt är mindre mer. Gå enkelt och använd det här verktyget selektivt.
Om du har problem med att välja, se till att du kolla in vår samling av 10 fantastiska Google-typsnittskombinationer du kan kopiera (slår också upp del två!).
Google-teckensnitt
Google Fonts är ett bibliotek med över 800 olika typsnitt, helt redo att vara inbäddade i ditt webbprojekt. Serien ser på vilka Google-teckensnitt och delar intressanta exempel och kombinationer av teckensnitt som kan ta ditt projekt till nästa nivå.