Idag ska vi lära oss om vad den nya Google-teckensnittet är och hur du implementerar det direkt i dina mönster.
Det är gratis att använda och kan installeras på under en minut när du hänger på det!
Introduktion
Under det gångna året har det varit ganska explosionen av alternativ för att implementera anpassade teckensnitt på webben. Alla vet att webtypografiens framtid är ljus men ingen vet exakt vad resultatet kommer att bli.
Flera företag har med rätta sett denna spirande teknik som ett sätt att tjäna lite pengar. Vi har nyligen haft en djupgående titt på några av de alternativ som finns i denna arena. Våra artiklar om TypeKit och FontDeck visar att dessa lösningar är snabba, enkla och inte helt olika. Dessa typer av tjänster kommer utan tvekan att fortsätta att tillhandahålla massor av premium typsnitt till överkomliga priser under en tid.
Men om du tittar på den väldigt populära tekniken på webben ser du en trend som dyker upp: gratis. HTML, CSS, JavaScript, PHP, det kostar inte en dime att använda. Det är därför rimligt att tro att den verkliga framtiden för webtypografi ligger i en fri lösning som kan användas av massorna utan några strängar.
En spelväxlare?
Självklart, när Google slår hatten i någon ring, har den en tendens att ändra allt. Nyligen lanserade Google (tillsammans med Typekit) tyst ett webfont-API som kan resultera i bara ett sådant långsiktigt skifte. Medan andra företag skapar medlemskap, betalningsplaner och abonnemang, bestämde Google sig för att avstå från en medlemstjänst helt för att ge ett gratis och enkelt sätt för alla webbutvecklare att snabbt ladda anpassade teckensnitt till en webbdesign.
För att se hur allting fungerar, låt oss dyka in i ett snabbt exempel. Innan vi börjar, här är en snabb förhandsgranskning och live demo av vad vi ska bygga.
HTML
För att öka roligt, låt oss använda HTML5 och CSS3 tillsammans med Googles typsnitt API. På det sättet får vi verkligen en bra inblick i den möjliga framtiden för webbdesign! Tänk på att det fortfarande finns vissa kompatibilitetsproblem för webbläsare med dessa tekniker. Så om du använder en sucky-webbläsare, vet bara att din erfarenhet kommer att skalas lite tillbaka, men ska försämras helt bra.
Startkoden
För att börja klistra in i en tom HTML5 kodbit.
Detta är en modifierad version av en startfil som jag hittade på Snipplr som innehåller ett JavaScript-hack för att hjälpa bra gamla IE tillsammans med HTML5.
Divs
Vi håller sidan super enkel och innehåller bara en rubrik, en subkopi och en enkel sidfot. Detta ger oss tre unika områden att leka med. Vi använder dessa områden för att implementera två olika teckensnitt från Google API.
Som du kan se har jag använt en h1-tagg för rubriken, en p-tagg för underrubriken och HTML5-sidfoten för sidfoten. För den senare har jag kastat i en orörd lista med länkar bara för att ha något där nere. Känn dig fri att helt ändra något av detta om du följer med eftersom det inte spelar någon roll vad du lägger in så länge du har lite kopia.
Vid denna tidpunkt borde du ha något grundläggande och fult i skärmdumpen nedan.
Det är all HTML som vi behöver! Låt oss hoppa över till CSS.
CSS
För CSS valde jag att genomföra en bra brevpresseffekt som inspirerades av denna Line25 CSS3 handledning. På webbläsare som inte stöder textskuggning är texten fortfarande helt läsbar och bör behålla Google webfont.
Grundläggande stilar
Först genomför vi en super grundläggande CSS återställning och kasta in en bakgrundsfärg.
Rubriken
Nästa kasta i några stilar för rubriken. Vi vill ha en teckensnittsfärg som är mörkare än bakgrunden och en skuggfärg som är ljusare än bakgrunden för att skapa den fina bokstävs illusionen.
Observera att vi också centrerar div och texten. Jag brukar vanligtvis undvika centrala weblayouter av flera skäl men det här är bara att visa upp lite text så att en centrerad div fungerar perfekt. Om du inte gillar det, vänligen lämna vänster justera din text.
Underhuvudet
Nästa upp är underrubriken eller stycket kopia. Vi utformar detta i huvudsak på samma sätt som rubriken bara mindre.
Observera att vi också har kastat i några länk och svävar stilar. När användaren svänger över en länk blir den en ljusare färg och bokstägeffekten blir en normal skugga.
Footer
Slutligen vänder vi vår oorderade lista till en horisontell linje med jämnt fördelad kopia.
Här har jag applicerat länk och svängstilar som liknar den i styckkopien och lagt till lite vaddering för att rymma ut länkarna.
Förhandsgranskning av teckensnitt
Lägg märke till att jag avsiktligt har släppt bort några typsnitt för familjefamiljer. Det beror på att vi i nästa steg lägger in några av typsnittet från Google API. För tillfället ska din sida se ut som skärmdumpen nedan. Tänk på att dina teckensnitt kommer att skilja sig på grundval av standardinställningarna i din webbläsare.
Som du kan se fungerar vår bokstäver effekt bara bra. Det är subtilt men gör texten lite snyggare.
Lägga till teckensnitt med Google Font API
Nu när vi har en grundläggande sida att spela med, är det dags att ladda några teckensnitt i! Första stoppet på Google Font API-sidan och klicka på Google Font Directory.
Här ser du en kort lista (för närvarande 18) av teckensnitt att välja mellan. Varje teckensnitt har flera varianter och undergrupper att välja mellan. När du hittar en som du gillar, klicka på den för att se de extra alternativen. Jag ska välja? IM Fell? och den första familjen under denna typsnitt (IM Fell DW Pica).
När du kommer till skärmen ovan, klicka på? Få kod? flik. Under den här fliken hittar du kodsedlarna du måste infoga teckensnittet på din webbsida. Det finns två sätt att importera teckensnittet: genom att länka i huvuddelen av din HTML eller genom att använda ett @import-uttalande. Vi kommer att använda båda för att få en känsla för hur de fungerar.
Metod 1: Huvudlänk
Ta först koden av kod som ser ut som den nedan och klistra in den i huvuddelen av din HTML-sida.
Kopiera nu CSS-kodet och klistra in det i rubrikerna för rubrik och underrubrik i ditt stilark.
Det är allt! Bara två kopiera och klistra in handlingar och du har fått dig en snygg ny webfont.
Metod 2: @Import
Nu för footer-teckensnittet upprepar vi samma process med en ändring. Hitta stilsorten? Inkonsolata? från listan Google Font, gå till "Få kod?" fliken och titta under? Font varianter och avancerade tekniker? avsnittet för följande kod:
Klistra in det här längst upp på din CSS-sida och kopiera sedan typsnittet CSS-kod och klistra in det i din sidfot.
Voila! Nu bör din sidfot innehålla Inconsolata-teckensnittet.
Slutlig förhandsvisning
Nu när vi är alla färdiga, ta en titt på den sista förhandsgranskningen för att se den i aktion. Klicka på bilden för att se live demo.
För lite mer avancerad kontroll över typsnittets laddning, kolla in WebFont Loader, ett JavaScript-bibliotek från Google som hjälper dig att justera processen.
Pros
Det är naturligtvis den enda snabbaste och enklaste webfontlösningen jag har kommit över. Jag vet att jag sa det i tidigare artiklar, men dessa saker fortsätter bara att bli bättre och bättre! Bristen på en registreringsprocess är en realtidssparare för Googles system. Eftersom du inte behöver gå igenom roten för att registrera specifika domännamn för att licensiera typsnittet, kan du även testa dem lokalt i din utvecklingsprocess! Denna sömlösa integration i mitt nuvarande arbetsflöde var en enorm kicker för mig, eftersom jag hatade att utveckla lokalt med fel typsnitt och tillämpa den anpassade teckensnittet på levande sidan.
Liksom bara om alla de populära webfontlösningarna använder Googles system @ font-face för att få jobbet gjort. Så varför gör du inte det själv? Chris Coyier påpekar tre huvudsakliga fördelar i sin artikel i Google Font API:? Bandbreddsparande (vikt är på Google), Cacheringshastighet (samma teckensnitt som används på flera sidor, webbläsarens cache sparkar in) och hastighet i allmänhet (Googles CDN är snabbare än din webbplats).?
Så väsentligt köljer det sig för snabb hastighet och snabbhet! Bara en sida teknisk notering om du undrar: all text är helt väljbar och kopierar / klistrar mycket bra. Jag hatar det när anpassade typsnitt kan väljas på en sida men kopierar inte korrekt!
Nackdelar
En av de största nackdelarna är att det för närvarande är väldigt få teckensnitt att välja mellan, vilket verkligen kan begränsa dina mönster. Till exempel började jag ursprungligen använda ett trevligt flytande manus, men hatade de två val som Google gav mig.
Tänk på att det här systemet fortfarande är väldigt nytt så att du kan förvänta dig att det växer mycket större eftersom nya fria teckensnitt läggs till. Men du kommer nog aldrig se kvaliteten och mångfalden här som du får från ett premiumalternativ som FontDeck eller TypeKit.
Vidare, som killarna på FontSquirrel påpekade i en ny tweet, finns det ingen SVG-version av teckensnittet, vilket innebär att du måste göra din egen om du vill ha iPhone / iPad-support.
Mitt sista klagomål är att det definitivt finns några märkbara kärnproblem med några av de tillgängliga teckensnitten (igen, kom ihåg att de är gratis). Jag är en utskrivnings kille så att de verkligen får mig att ringa. De är nog möjliga att fixa med CSS, det blir bara lite tråkigt och irriterande.
Slutsats
Google Font API representerar ytterligare ett kapitel i historien om @ font-face-metoder för att skapa mer varierande typografi på webben. Även om teckensnittsvalen för närvarande är begränsade är det definitivt det bästa genomförandet jag har försökt än, eftersom det bara är så snabbt och enkelt.
Möjligheten att avstå från en registreringsprocess och prova lokalt utan huvudvärk vid specifik domänregistrering är verkliga vinnande egenskaper för mig, men jag skulle gärna höra vad du tycker? Gillar du Googles system och om så vill du använda den? Använd kommentarsektionen nedan för att dela dina tankar.