Flera alternativ har skurits upp för att lägga till anpassade teckensnitt på din webbplats genom att använda @ font-face-väljaren. TypeKit är en spännande ny spelare i det här spelet eftersom det står på två nyckelområden: användarvänlighet och rikedom av teckensnitt som finns tillgängliga. Denna handledning tar dig igenom flera små, super enkla steg för att få TypKit igång på din webbplats. Du hittar ingen avancerade tekniker eller skript här, så även om du är en nybörjare webbdesigner bör detta vara en film!
Först: de dåliga nyheterna
Om du kryssar över till TypKit-webbplatsen ser du att du bara har valet att anmäla dig till en inbjudan. Det betyder inte att du får en direkt så att du kanske måste vänta ett tag innan du får chansen att anmäla dig. Lyckligtvis kunde jag ta en inbjudan från Design Shack webbplatsägare David Appleyard så att jag kunde visa dig runt!
Registrerar dig
När du registrerar dig står du inför valet mellan en av fyra planer. Medan du skakar huvudet i besvikelse, låt mig förklara varför det inte bara är en gratis tjänst. Enkelt uttryckt kostar teckensnitt pengar. Det finns några fåstegritorier som skapar och säljer kvalitetsfonter som de inte vill ladda ner gratis. Det brukade vara så att du, trots att du är den goda medborgaren som du är, betalat fullt pris för en kvalitetstyp, kunde du fortfarande inte sätta det här tecknet på din webbplats på grund av licensfrågor. Kort sagt, inbäddning av teckensnittet innebar att användarna kunde stjäla det för sig själva. TypeKit kjolar kring denna fråga på grund av de avtal som den har gjort med de stora gjuterierna för att licensiera typsnitt för endast webben. Vad det här betyder är att du inte är fast med fula, fria fonter med låg kvalitet för din webbplats, utan snarare ett stort urval av professionella typsnitt som du skulle se i utskriftsvärlden. Lång historia kort, kvalitet kommer till ett pris. Här är de planer du kan välja mellan:
Observera att för den här handledningen använder jag den kostnadsfria demo så vi får se ett trimmat urval av teckensnitt och begränsas till två anpassade teckensnitt på vår webbplats. Med det i åtanke, låt oss ta en titt på vår testplats!
Testplatsen
För denna handledning har jag byggt en snabb och smutsig sida för en sida med massor av text. Du måste veta att jag har stylat huvudrubriken med hjälp av? H1? tagg och stycketexten med en enkel? p? märka. För att se testplatsen live (och mycket större), klicka här eller kolla in skärmdumpen nedan.
Kit Setup
Efter att ha valt en plan är ditt nästa steg att skapa ditt första kit och konfigurera en URL. Tänk på att du inte behöver infoga en viss sidadress utan snarare webbadressen som helhet. Du kan till exempel se att jag just har skrivit in den huvudsakliga Design Shack URL-adressen.
Vid anmälan bör du också få ett manus för att bädda in på din webbplats. Nästa tittar vi på vad vi ska göra med detta.
Inbäddade koden
Nyckeln till att TypKit har åsidosatt din CSS är följande kodkod som de ger dig att sätta in i din html:
Placera bara den här koden i rubrikavsnittet på HTML-sidan du vill ändra. Det är all kodning du måste göra! Bara en enkel kopia och klistra in och du är redo att gå. Se till att du publicerar den uppdaterade HTML-sidan på din webbplats innan du börjar lägga till teckensnitt.
Lägga till teckensnitt
Tro det eller inte, vi är nästan färdiga. Allt som är kvar är att välja några teckensnitt och berätta var de ska gå. Som jag nämnde tidigare ger TypeKit ett stort urval av högkvalitativa teckensnitt att välja mellan om du väljer en av de betalda planerna. Kom ihåg att den fria planen har ett mycket mer begränsat (dock inte dåligt) val. För att ersätta huvudhuvudet väljer vi en skrynklig typsnitt. Ner till höger om teckensnittslistan ser du en serie taggar. Klicka på? Distressed? tagg för att bara se de distresserade teckensnitten.
Känn dig fri att bläddra och välj vilken du vill. När du hittar en du gillar, klicka på? Lägg till? knappen (jag valde Bodedo). Efter att klicka på? Lägg till? knappen, bör fönstret för redigeringsverktyget dyka upp.
Kit Editor
Efter att du har lagt till ett teckensnitt ska du presenteras med följande fönster:
Det är här du kommer att tillämpa det teckensnitt du valde för din webbplats. Lägg märke till i den övre vänstra delen av redigeraren får du en anpassad väljare som ska användas i din kod (i vårt fall, .tk-bodedo). Du kan gå in på koden på din webbplats och ersätta valet du önskar med den som ges här för att ersätta teckensnittet. Men vad vi ska göra istället berättar TypKit de befintliga taggarna vi har använt på vår webbplats. Som jag sa tidigare är vår huvudrubrik helt enkelt en? H1? tagg så allt vi behöver göra är typ? h1? (utan citat) i fältet under? väljare? och träffa lägg till.
Klicka nu på knappen Publicera. Det är allt! TypeKit kommer att göra resten. Uppdatera din sida efter en minut eller två, så ser du teckensnittet.
Justera din CSS
En av de stora sakerna om TypeKit är att den bara ersätter teckensnittet. Alla inställningar relaterade till teckensnittet kan fortfarande styras i din CSS. Kolla in min test sida efter att jag har lagt till en anpassad typsnitt till stycke kopian.
Observera att det nya tecknet ser väldigt konstigt ut med mina aktuella inställningar för linjehöjd. Det är också för spridet och äter nu mycket mer vertikalt utrymme. För att åtgärda detta problem gick jag bara in i min CSS-fil och ringde ner längdhöjden på min styckekopia. Vilken förändring jag gör i min CSS bortsett från själva fonten själv kommer att påverka det nya teckensnittet på min webbplats. Så du kan stila till ditt hjärtans innehåll och ditt anpassade teckensnitt kommer att vara kvar! Här är min justerade linjehöjd.
Den färdiga produkten
Ta en titt på den färdiga platsen här för att se TypeKit i aktion. Trots det faktum att webbplatsen var förmodligen mycket mer attraktiv innan vi började, kan du enkelt se fördelarna med TypeKit. Observera att de anpassade teckensnitt som du ser inte är bosatta på din dator och ändå förhandsgranskar de perfekt och kan enkelt väljas.Det bästa är att allt detta gjordes med en användarvänlig GUI och bara ett kodstycke som vi inte behövde skriva! Jag är dock inte beröm och komplimanger när det gäller TypeKit. Innan vi avslutar, låt oss kortfattat diskutera vad jag tycktes vara mindre än perfekt.
Kritiken
Låt oss först diskutera tekniska buggar. Jag nämnde tidigare att när du slår på? Publicera? knappen måste du vänta en minut innan webbplatsuppdateringarna. När du är van vid att se kodade ändringar uppdateras omedelbart kan det vara oerhört frustrerande. Den frustrerande delen är inkonsekvensen. Ibland ändras effekten nästan omedelbart medan andra lämnar dig som trycker på uppdateringsknappen i några minuter och väntar på att förändringen ska ske. Jag har också haft några problem med webbplatsen själv. Satsredigeringsfönstret vägrar att starta för mig ungefär 50% av tiden, istället får jag ett tomt fönster med en aldrig slutlig lastningsanimation. Att stänga fönstret och återuppta kit-redigeraren löser problemet, men det är fortfarande ganska irriterande. Slutligen är kostnadsstrukturen inte lätt för varje designer att motivera. Visst att ha valbar text på din webbplats är bra, men för 250 dollar per år kommer många människor nog bara att hålla sig till att infoga snygga rubriker som bilder.
Slutsats
Det handlar om allt du behöver veta för att komma igång med TypeKit. Vi gick över att anmäla dig och välja en plan, konfigurera ditt första kit, lägga till teckensnitt på din webbplats, publicera dina ändringar och justera din CSS efter att ha genomfört anpassade teckensnitt. Det här är en lång artikel men det är bara för att jag delar upp processen i så små, hanterbara steg. I all verklighet kan du få TypKit igång på din webbplats på några minuter. Gå med på din inbjudan och var säker på att berätta vad du tycker om TypeKit och andra anpassade typsnittslösningar som du hittat. Ställ dig några frågor med hjälp av kommentarerna nedan eller via Twitter.