Adobe lanserade nyligen en gratis webbtyptjänst för att komplettera Typekit, deras fantastiska premium service. Adobe Fonts Web Fonts ger dig för närvarande cirka 500 gratis teckensnittfamiljer som du kan använda på din webbplats idag med liten ansträngning. Hur bra är det?
Processen för att implementera dessa teckensnitt är inte lika enkelt som några av de andra tjänsterna du kanske brukar använda, så idag kommer vi att dyka in och titta på hur allting fungerar.
Möt kantbordsfonter
Launching Edge Web Fonts är lite av ett överraskande drag för Adobe. Det ger Adobe-fans en ny anledning att avstå från att köpa ett Typekit-abonnemang. Men med tanke på styrkan hos fria konkurrenter som Google Web Fonts kanske det var ett nödvändigt steg.
Den riktigt konstiga delen för mig är hur fragmenterad tanken verkar för tillfället. Edge Web Fonts använder faktiskt Typekit för att tjäna upp teckensnitt, men det är inte, som du kanske förväntar dig, helt enkelt en ny fri plan tackad på Typekit. Det är för närvarande mer av en fristående tjänst. Denna tjänst har implementerats direkt i några av Adobes appar, men den är också tillgänglig för användning utan dessa appar så länge via ett snabbt besök i dokumentationen.
? Det är inte, som du kanske förväntar dig, helt enkelt en ny fri plan tackad på Typekit.?Kanske använder Adobe? Edge? verktyg och tjänster som en slags "Google Labs"? stil, vilket innebär att Edge Web Fonts eventuellt skulle kunna bli en del av Typekit en dag. Men det är all formodning, för nu är de två begreppsmässigt distinkta.
Genomförande: Välj ditt gift
Edge Web Fonts är faktiskt en ganska fantastisk tjänst när det gäller urval. Det finns massor av bra teckensnitt som bidrar av Adobe, Google (Konkurrent? Partner? Google blurs alltid denna linje) och andra.
Frågan är, hur använder du det ?? Det är en enkel nog fråga, men svaret är lite mer komplicerat. Det är ingen raketvetenskap, men det finns några olika alternativ som du borde vara medveten om:
- Förhandsgranskningsverktyg - En liten widget på webbplatsen Edge Web Fonts som hjälper dig att välja ett teckensnitt och ta tag i koden.
- Appsupport - Vissa Adobe-appar integrerar tjänsten direkt så att du enkelt kan komma åt det fullständiga fria fontbiblioteket.
- Manuell - Du kan använda dokumentationen och skriva din egen kod för att implementera några av de teckensnitt du vill ha.
I slutändan är alternativen bra, och vi har ett antal av dem att välja mellan här. Låt oss ta en titt på var och en nära varandra.
Förhandsgranskningsverktyg
För att använda förhandsgranskningsverktyget, klicka på sidan Adobe Edge Web Fonts och bläddra ner till undersidan av sidan. Du bör hitta följande verktyg i den vänstra kolumnen:
Det här lilla verktyget är enkelt men praktiskt. Du väljer helt enkelt ett teckensnitt i rullgardinsmenyn och de lilla förhandsgranskningsrutorna uppdateras med ditt val. Du kan även anpassa texten i förhandsvisningen:
Som vi såg på skärmbilden ovan, producerar ditt urval två textutdrag som kan användas för att implementera typsnittet på din webbplats. Det börjar med en JavaScript-inbäddning:
Sedan hoppar du över till din CSS och använder namnet på teckensnittet i din kod precis som du skulle med ett inbyggt teckensnitt.
Problemet
Det här är ganska enkelt, inte sant? Välj typsnitt, greppkod; Gjort. Jag är inte säker på att det kan bli mycket enklare. Tyvärr är det som är ganska jobbigt att faktiskt välja ett teckensnitt, eftersom det här är din metod att göra det:
Som du kan se får du en stor, vanlig textlista. Det innebär att du måste gå igenom och välja varje alternativ en åt gången för att se förhandsvisningen. Självklart är detta inte idealiskt!
Appsupport
För närvarande är appsupport begränsat, men det kommer sannolikt att expandera inom en snar framtid. Dina två alternativ är för närvarande Edge Code (Brackets) och Muse.
Jag är inte en Muse-fan, så låt oss titta på hur appsupport fungerar i Edge Code, som faktiskt bildar sig till en ganska cool textredigerare.
Webfonter i Edge Code
För att använda webbfonter i kantkoden, hoppa över till din CSS och börja skriva ut en typsnittfamilj. Detta kommer att dyka upp en snabbmeny med en? Bläddra i webbfonter? alternativ längst ner:
Klicka på det här objektet och du får något som är mycket bättre än den enkla textlistan som vi såg i föregående exempel. Här ser vi ett raster med typsnittshistorik som liknar vad du skulle hitta på Google Webbfonter.
Här kan du söka på teckensnitt, bläddra igenom dem manuellt eller använd filtren till vänster. Med de två knapparna längst upp till vänster kan du välja mellan rubriker och stycke teckensnitt och de åtta knapparna längst ner gör att du kan filtrera efter stilar som slabserif och handskriven.
För att välja ett teckensnitt, välj det enkelt och klicka på? Klar? knapp. Allt detta verkligen gör att du sätter in teckensnittsnamnet i din CSS, då kan du manuellt ställa in vissa säkerhetskopianer.
Problemet
Även om jag älskar supporten för app för att faktiskt välja ett teckensnitt, vad händer när du gör valet är lite underwhelming. Det är trevligt att det sätter in namnet för dig i CSS, men det räcker inte för att faktiskt genomföra teckensnittet på din webbplats, du behöver fortfarande den HTML-koden från tidigare. Detta skapas inte automatiskt med hjälp av stegen ovan, och det verkar inte finnas något tydligt sätt att göra det från HTML-dokumentet.
I slutändan är supporten för appen begränsad nog att du fortfarande kommer att surfa igenom hela dokumentationen för manuell implementering.
Manuell implementering
Vårt sista alternativ är fullt på manuell implementering, och Adobe har en noggrann dokumentation som hjälper dig att göra just det.
Nyckeln till att implementera typsnitt manuellt är att förstå länkens syntax i inbäddningskoden. Här är ett exempel från dokumentationen:
Som du kan se är det mycket pågår här. Vad vi gör är att implementera flera familjer och rikta specifika variationer däri. Här är ett litet diagram som jag visade upp för att hjälpa oss att gräva igenom vad som händer i den länken:
Som du kan se finns det tre delar som vi behöver sätta ihop runt oss. Låt oss ta en kort titt på var och en.
familj
Det här är enkelt, enkelt kasta i namnet på det teckensnitt som du vill använda. Detta är tekniskt allt du behöver för att göra det anpassade teckensnittet. Detta ensam kommer att dra in i familjen som helhet. Du kan importera flera familjer med en semikolon som en separator.
fvd
Vissa familjer kommer med flera variationer som "Extra Light"? eller? Semibold.? Du kan importera dem selektivt med hjälp av? Font variationsbeskrivning? eller fvd, som betecknas med en bokstav och ett tal.
Med hjälp av det här diagrammet som finns i dokumentationen kan vi enkelt ta tag i specifika variationer av familjen istället för att ta tag i hela saken och därigenom spara lite tid på laddningssteget. Så här ser det ut:
Som du kan se skriver du först familjen och lägger sedan in ett kolon följt av fvd-koderna, som skiljs åt av kommatecken.
delmängd
Underuppsättningar ger dig lite kontroll över storleken på den inbäddade teckensnittfilen genom att välja om du behöver alla tillgängliga glyfer. Det finns två alternativ för tillfället: standard och alla.
Standarden? set innehåller dina vanliga tecken, och är vanligtvis allt du behöver. Allt? set är en utökad version som ger dig allt tecknet har att erbjuda, så några små extrafunktioner och udda tecken kommer att ligga här. Varje teckensnitt är annorlunda och kan eller kanske inte innehåller den glyph du ska implementera.
Om du vill ha standard? subset behöver du inte skriva något extra. Om du vill ha allt? subset, kasta i ett kolon och ordet "allt".
html]
[/html]
Problemet
Självklart är den manuella implantationsmetoden bäst eftersom det ger dig så mycket kontroll över de typsnitt som du lägger in. Problemet med den här metoden är dock att du inte riktigt har ett bra sätt att se vad du kommer in i. Dokumentationen erbjuder bara en jätte lista över oformaterade teckensnitt och deras alternativ:
För att förhandsgranska ett teckensnitt måste du testa det, använd funktionen i appen eller det förhandsgranskningsverktyg som vi såg ovan.
Slutsats
Adobe Edge Web Fonts är en väldigt robust och expansiv webbtyplösning och jag är glad att Adobe har gjort det tillgängligt gratis.
Det finns ett antal sätt att gå om att implementera en Edge Web Font, som alla har sin egen lista med fördelar och nackdelar. I slutändan skulle jag gärna vilja se en typkit-liknande webbapp som hjälper dig att förhandsgranska och bläddra till teckensnitt utan att tvingas till Edge Code eller Muse. Utan detta kommer jag förmodligen att hålla mig till Google Web Fonts mest av tiden.
Vad tror du? Är Adobes nya fria fontstjänst tillräcklig för att få dig att tänka två gånger om att vända sig till din typiska webbtyckelösning? Varför eller varför inte?