Alternativ för @ Font-Face-implementering
Webfont-inbäddning stöds så mycket av moderna webbläsare vid denna tidpunkt att det verkligen finns ingen ursäkt för att inte införliva dem när det är lämpligt i dina mönster. Det finns hundratals gratis fonter tillgängliga för inbäddning, liksom gott om betalda tjänster som låter dig inkludera kommersiella typsnitt i dina mönster.
Många designers verkar skrämmas av tanken på @font-face embedding dock. Trots att det har blivit popularitet och stöd för de senaste åren, håller många designers fortfarande sin vanliga samling webbsäkra typsnitt för de allra flesta av deras mönster. I det sällsynta fallet går de ut ur sin komfortzon och innehåller ett webbfont, de går bara med en webbfont prenumerationstjänst istället för att titta på DIY-inbäddning eller något liknande Googles webbfonter .
I den här artikeln ger jag dig allt du behöver veta för att börja integrera dina egna teckensnitt och börja använda Google webbfonter. Koden i sig är enkel, och jag kommer också att bryta ner exakt varför vi använder koden vi använder. Jag kommer även att ge dig tio bra exempel på webbfontekombinationer som du kan implementera på dina egna mönster om du inte är bekväm med typsnittskombinationer.
Juridik förknippade med inbäddning av teckensnitt
Det är viktigt att börja med en diskussion om de juridiska problem som kan uppstå när inbäddning av teckensnitt på din webbplats. Inte alla teckensnitt är licensierade för den typen av användning, särskilt kommersiella typsnitt. Vissa kräver förlängda licenser, medan andra förhindrar träning tillsammans (eller sälja en tjänst för att hantera inbäddning för dig).
Det är viktigt att kontrollera EULA för vilka teckensnitt du planerar att använda för att vara säker @font-face inbäddning är tillåten. Om inte, måste du antingen välja ett annat teckensnitt, ta reda på om det finns en separat licens som du kan köpa, eller se om en av webbtypstjänsterna där ute innehåller ditt typsnitt.
Alternativ för inbäddning
Inbäddning av teckensnitt med @font-face är inte särskilt komplicerat, men det är en process med flera steg. Det finns ett par olika sätt att göra detta, inklusive några gratis och betalda tjänster samt en helt DIY-metod.
DIY inbäddning
För de bästa resultaten och det mest omfattande webbläsarstödet, vill du använda ett verktyg som Font Ekorrel @font-face Generator. Med det här gratisverktyget kan du ladda upp alla teckensnitt som du har behöriga behörigheter för och konverterar det till olika typer av typsnitt som stöds för olika webbläsare.
När du har ditt typsnittspaket, vill du ladda upp det till din server, förmodligen i en katalog som heter "teckensnitt" eller något liknande. När det är laddat upp, går du in på din webbplatss CSS och innehåller följande kod:
@font-face {font-family: "Dancing Script";src: url("fonts/DancingScript.eot");src: local("#"),url("fonts/DancingScript.ttf") format("truetype"),url("fonts/DancingScript.woff") format ("woff"),url("fonts/DancingScript.svg") format ("svg");}Line-by-line, detta bryter ned enligt följande:
font-family: "Dancing Script";
Denna del anger typsnittet så att vi kan ringa det senare i våra stilar.
src: url("fonts/DancingScript.eot");
EOT-filer stöds av Internet Explorer 4.0 och senare. Utan den här filen, din @font-face Implementeringen fungerar inte i IE-versioner som är äldre än 9,0.
src: local("#"),
Den här raden hindrar en lokal typsnitt att laddas, om en existerar. Medan vissa programmerare föredrar att ha den lokala typsnittet för att spara bandbredd, kan potentialen för att det orsakar problem uppväga fördelarna. Om någon har en annan version av teckensnittet installerat lokalt (eller säg en dålig piratkopierad version), kan det ha en drastisk inverkan på hur din design ser ut. Enligt min åsikt är det bättre att spela det säkert och behålla full kontroll över exakt vilka teckensnitt.
url("fonts/DancingScript.ttf") format("truetype"),
TrueType-teckensnitt är kompatibla med Mozilla 3.5+, Safari 3.1+, Opera 10+ och Chrome 2.0+.
url("fonts/DancingScript.woff") format ("woff"),
Denna .woff-fil tar hand om IE 9+, Mozilla 3.6+, Safari 5.1+, Opera Presto och Chrome 5.0+.
url("fonts/DancingScript.svg") format ("svg");
Det här slutliga formatet tar hand om Safari 3.1+, Opera 9+ och Chrome 0.3+. SVG är också nödvändigt för iPad och iPhone Safari, eftersom det för närvarande inte fungerar med andra typsnitt.
Att använda flera format på dina teckensnitt är viktigt för maximal webbläsarkompatibilitet. Vi har utelämnat OpenType (otf) teckensnitt här, eftersom de inte lägger till någon kompatibilitet som inte existerar med TrueType-teckensnitt (och TrueType-teckensnitt är kompatibla med Chrome, medan OpenType-teckensnitt inte är).
Nu när du är redo att ringa tecknet i din CSS, behandlar du det som en vanlig webbsäker typsnitt.
h1 { font: 24px "Dancing Script", "Times New Roman", serif; }
Se till att du anger fallback-teckensnitt, så att om webblanketten av någon anledning inte laddas (eller din besökare använder en icke-stödd webbläsare), har du fortfarande åtminstone kontroll över hur webbplatsen ser ut. Om du inte gör det kommer standardfonten att ladda, och alltför ofta är det en monospaced typsnitt som Courier New.
Google Web Fonts API
För bara några månader sedan, the Google Web Fonts API ingår bara ett par dussin typsnitt. Det var bra om det teckensnitt du hände vill använda var med, men annars var det inte så mycket praktisk användning. Det har förändrats.
Google värdar nu mer än 230 typfamiljer, många med flera stilar eller vikter. Och de är alla gratis att använda. Detta är en bra resurs för designers som vill använda webbfonter, men vill inte vara värd för sina teckensnitt själva (möjligen på grund av bandbreddsproblem).
Google erbjuder tre olika metoder för inkluderade teckensnitt: en standardmetod, som använder en länk till ett CSS-stilark i din head , en @import metod och en JavaScript-metod.
Oavsett vilken du bestämmer dig för att använda, behöver du inte registrera dig för något speciellt konto, och gripande teckensnitt är en stegvis process (hitta bara det teckensnitt du vill ha och klicka sedan på "Snabbanvändning" för att få koda).
Teckensnittstjänster
Det finns ett antal andra typsnittstjänster, t.ex. Typekit och Fonts.com webbfonter , varav de flesta är prenumerationsbaserade. Deras avgifter varierar ganska mycket, liksom deras villkor. Vi täckte dem mer i detalj i en tidigare inlägg .
Huvudskälet att använda en av dessa tjänster är när vilken typ av typ du vill använda (eller behöver användas på grund av kundspecifikationer) är inte licensierad för regelbunden @font-face inbäddning, men är tillgänglig via en av dessa tjänster. Eftersom vissa av tjänsterna tillhandahålls av typgjuterier själva finns det ett bredare urval tillgängligt.
För det mesta fungerar dessa tjänster på samma sätt som Google Web Fonts API så långt som inbäddning går, men varje har sin egen specifika metod. En annan extra fördel är att du får stöd om du har problem med att bädda in eller använda teckensnitt.
När ska du använda @ font-face
På grund av relativt utbrett stöd, @font-face kan användas på praktiskt taget vilken som helst webbplats. Det är ett bra sätt att skilja på en annars enkel och ren design från miljontals andra enkla och rena mönster där ute. Det kan också lägga till extra karaktär för mer visuellt komplexa mönster. Det finns ingen ursäkt för att inte använda en stor typsnitt för åtminstone rubriken på webbplatser du designar.
Naturligtvis kan alla dessa nya alternativ vara väldigt skrämmande för designers som inte är typografiska experter. Men lyckligtvis finns det massor av resurser där ute för att kombinera typsnitt som kan hjälpa dig att komma fram till dina egna kombinationer. Under tiden finns nedan tio kombinationer du kan använda just nu, bestående av fria teckensnitt från antingen Font Ekorre eller Google Web Fonts API.
Fantastiska webfontkombinationer
Om du inte är säker på var du ska börja kombinera typsnitt, försök dessa kombinationer på för storlek.
Seriebok
Nu är det absolut ingen ursäkt att någonsin använda Comic Sans på en hemsida!
Komika Titel | Colaborate Light | Komika Text
Klassisk, elegant plats
Denna kombination är klassisk och elegant, men kombinerad med rätt bakgrund och färgschema kan det också tyckas friskt och modernt.
Dancing Script | Droid Serif | Droid Sans
Grunge webbplats
Grunge-typen är bäst kvar till titlarna, men det betyder inte att du inte heller kan hitta några bra typsnitt för din andra text.
Copystruct | cicle | miso
Enkel och ren plats
Enkelt och rent brukade innebära Helvetica. Inte längre.
Oswald | Skådespelare | Terminaldos Light
Mer grunge
Här är ett annat alternativ för grunge stil webbplatser. Den här skulle också fungera bra på en illustrerad webbplats.
FFF TUSJ | Brawler | Perspektiv Sans
Retro plats
Denna kombination skriker mitt århundrade Amerika.
Yellowtail | Josefin Sans Semi-Bold 600 | Rokkitt
Feminin plats
Feminin behöver inte nödvändigtvis vara lika mjukt. Detaljerna om dessa teckensnitt ger en feminin touch utan att vara snyggt.
Leckerli One | Fragment | Amaranth
Skraj och modern plats
Funky typsnitt lägger till mycket karaktär. Se bara till att du håller läsbarheten i åtanke.
Formell plats
En mer formell webbplats kräver mer formell typografi. Här är en kombination av ett formellt manus med traditionella serif och sans serif typsnitt.
Mandarin | Crimson Text | Rosario
Unika och moderna platser
En annan unik, funky typsnittsparning. Kontrasten mellan de skarpa vinklarna på titeln och kroppsfonterna med de avrundade kanterna i metafonturen är en fin touch och ger mycket intresse.
Geostar | Kelly Slab | Comfortaa
Slutsats
Som redan nämnts finns det ingen ursäkt för att inte arbeta med @font-face längre. Reglerna för god typografi gäller fortfarande, och allt du vet om att kombinera websafe-teckensnitt överförs. Du har bara mycket fler alternativ nu!
Hur ofta använder du @ font-face i dina egna projekt? Gör du DIY eller använder du en tjänst? Dela dina erfarenheter och tips i kommentarerna!