Adobe ha recentemente lanciato un servizio gratuito di font web per integrare Typekit, il loro straordinario servizio premium. Adobe Edge Web Fonts offre attualmente circa 500 famiglie di font gratuiti che puoi utilizzare sul tuo sito oggi con poco sforzo. Quanto è bello?
Il processo di implementazione di questi font non è così semplice come alcuni degli altri servizi a cui potresti essere abituato, quindi oggi ci tufferemo e daremo un'occhiata a come funziona.
Scopri i font Web di Edge
Avviare Edge Web Fonts è una mossa sorprendente per Adobe. Offre ai fan di Adobe un nuovo motivo per rinunciare all'acquisto di un abbonamento a Typekit. Tuttavia, data la forza di concorrenti gratuiti come Google Web Fonts, forse era una mossa necessaria.
La parte davvero strana per me è quanto l'idea sembra frammentata al momento. Edge Web Fonts utilizza effettivamente Typekit per servire i caratteri, ma non è, come ci si potrebbe aspettare, semplicemente un nuovo piano gratuito applicato a Typekit. Attualmente è più di un servizio autonomo. Questo servizio è implementato direttamente in alcune delle app di Adobe, ma è anche disponibile per l'uso senza quelle app per tutto il tempo tramite una rapida visita alla documentazione.
? Non è, come ci si potrebbe aspettare, semplicemente un nuovo piano gratuito applicato a Typekit.?Forse Adobe sta usando il? Edge? strumenti e servizi come una sorta di? Google Labs? parco giochi di stile, il che significa che Edge Web Fonts potrebbe potenzialmente laurearsi per diventare parte di Typekit un giorno. Ma questa è una congettura, per ora, i due sono concettualmente distinti.
Implementazione: scegli il tuo veleno
Edge Web Fonts è in realtà un servizio piuttosto fantastico in termini di selezione. Ci sono un sacco di grandi caratteri forniti da Adobe, Google (concorrente? Partner? Google sfuma sempre questa linea) e altri.
La domanda è, come la usi ?? È una domanda abbastanza semplice, ma la risposta è un po 'più complicata. Non è una scienza missilistica, ma ci sono alcune opzioni diverse di cui dovresti essere a conoscenza:
- Strumento di anteprima - Un piccolo widget sul sito Edge Web Fonts che ti aiuta a scegliere un font e ad afferrare il codice.
- Supporto per l'app - Alcune app di Adobe integrano direttamente il servizio in modo da poter accedere facilmente alla libreria di font gratuita.
- Manuale - È possibile utilizzare la documentazione e scrivere il proprio codice per implementare qualsiasi tipo di carattere ovunque si desideri.
In fin dei conti, le opzioni sono buone e ne abbiamo alcune tra cui scegliere qui. Diamo un'occhiata a ciascuno da vicino.
Strumento di anteprima
Per utilizzare lo strumento di anteprima, visualizza la pagina Font Adobe Edge Web e scorri verso il basso fino alla fine della pagina. Dovresti trovare il seguente strumento nella colonna di sinistra:
Questo piccolo strumento è semplice, ma a portata di mano. Scegli semplicemente un carattere dal menu a discesa e gli aggiornamenti della piccola anteprima in tempo reale con la selezione. Puoi persino personalizzare il testo nell'anteprima:
Come abbiamo visto nello screenshot qui sopra, la tua selezione produce due frammenti di testo che possono essere utilizzati per implementare il carattere sul tuo sito. Inizia con l'incorporamento di JavaScript:
Poi vai sul tuo CSS e usa il nome del font nel tuo codice proprio come faresti con qualsiasi font nativo.
Il problema
Questo è abbastanza facile, giusto? Scegli il font, prendi il codice; fatto. Non sono sicuro che potrebbe diventare molto più semplice. Sfortunatamente, la cosa che hai incontrato con questo strumento è che è piuttosto laborioso scegliere un font, dato che questo è il tuo metodo per farlo:
Come puoi vedere, ottieni un enorme elenco di testo. Ciò significa che devi passare e selezionare ogni opzione una alla volta per vedere l'anteprima. Ovviamente, questo non è l'ideale!
Supporto per l'app
Attualmente, il supporto dell'app è limitato, ma probabilmente si espanderà nel prossimo futuro. Le tue due opzioni al momento sono Edge Code (Brackets) e Muse.
Non sono un fan dei Muse, quindi diamo un'occhiata a come funziona il supporto delle app in Edge Code, che in realtà si preannuncia come un editor di testo piuttosto interessante.
Caratteri Web in Edge Code
Per utilizzare i caratteri Web in Edge Code, passa al CSS e inizia a digitare una famiglia di font. Questo farà apparire un menu di scelta rapida con? Sfoglia i caratteri Web? opzione in basso:
Clicca su questo oggetto e otterrai qualcosa che è tanto meglio della semplice lista di testo che abbiamo visto nell'esempio precedente. Qui vediamo una griglia di anteprime dei caratteri simile a quella che potresti trovare su Google Web Fonts.
Qui puoi cercare i caratteri, scorrerli manualmente o utilizzare i filtri a sinistra. I due pulsanti in alto a sinistra ti permettono di scegliere tra i font header e paragraph e gli otto pulsanti in basso ti permettono di filtrare per stili come slap serif e handwritten.
Per scegliere un carattere, selezionalo e premi il? Fatto? pulsante. Tutto ciò, tuttavia, è davvero importante se inserisci il nome del carattere nel tuo CSS, quindi puoi impostare manualmente alcuni caratteri di backup.
Il problema
Anche se adoro il supporto in-app per scegliere in realtà un font, cosa succede quando fai la scelta è un po 'travolgente. È bello che inserisca il nome nel CSS, ma questo non è sufficiente per implementare effettivamente il carattere sul tuo sito, hai ancora bisogno di quello snippet HTML di prima. Questo non viene generato automaticamente utilizzando i passaggi precedenti, né sembra esserci un modo chiaro per farlo dal documento HTML.
In definitiva, il supporto in-app è abbastanza limitato da poter continuare a sfogliare l'intera documentazione per l'implementazione manuale.
Implementazione manuale
La nostra opzione finale è completa sull'implementazione manuale e Adobe ha una documentazione completa per aiutarti a fare proprio questo.
La chiave per implementare manualmente i caratteri è comprendere la sintassi del collegamento nel codice di incorporamento. Ecco un esempio dalla documentazione:
Come puoi vedere, c'è molto da fare qui. Quello che stiamo facendo è l'implementazione di più famiglie e il targeting di variazioni specifiche al suo interno. Ecco un piccolo grafico che ho montato per aiutarci a capire cosa sta succedendo in quel collegamento:
Come puoi vedere, ci sono tre parti di cui abbiamo bisogno per avvolgere le nostre menti. Diamo un'occhiata a ciascuno di essi.
famiglia
Questo è facile, basta inserire il nome del carattere che vorresti usare. Questo è tecnicamente tutto ciò che serve per far funzionare il carattere personalizzato. Questo da solo coinvolgerà tutta la famiglia. Puoi importare più famiglie con un punto e virgola come separatore.
FVD
Alcune famiglie hanno più varianti come? Extra Light? o? Semibold.? Puoi importarli in modo selettivo usando la? Variation Description Description? o fvd, che è indicato da una lettera minuscola e un numero.
Usando questo grafico trovato nella documentazione, possiamo facilmente prendere specifiche variazioni della famiglia invece di afferrare l'intera cosa, risparmiando così un po 'di tempo nella fase di caricamento. Ecco come appare in azione:
Come puoi vedere, prima scrivi la famiglia, quindi inserisci i due punti seguiti dai codici fvd, separati da virgole.
sottoinsieme
I sottoinsiemi consentono di controllare la dimensione del file di font incorporato scegliendo se sono necessari o meno tutti gli glifi disponibili. Al momento ci sono due opzioni: predefinita e tutte.
Il predefinito? set contiene i tuoi personaggi standard ed è in genere tutto ciò di cui hai bisogno. Il tutto? set è una versione ampliata che ti offre tutto ciò che il font ha da offrire, quindi eventuali piccoli extra e personaggi dispari si troveranno qui. Ogni font è diverso e potrebbe contenere o meno il glifo che stai cercando di implementare.
Se vuoi il? Default? sottoinsieme, non devi preoccuparti di digitare qualcosa in più. Se vuoi il? Tutto? sottoinsieme, lanciare il colon e la parola? all ?.
html]
[/ Html]
Il problema
Ovviamente, il metodo di impianto manuale è il migliore perché ti dà così tanto controllo sui file dei font che stai incorporando. Il problema con questo metodo è che non hai davvero un buon modo di vedere in cosa stai andando. La documentazione offre semplicemente una lista gigante di caratteri non formattati e le loro opzioni:
Per visualizzare l'anteprima di un font, devi testarlo, utilizzare la funzionalità in-app o lo strumento di anteprima che abbiamo visto sopra.
Conclusione
Adobe Edge Web Fonts è una soluzione per i caratteri Web incredibilmente robusta ed espansiva e sono entusiasta che Adobe lo abbia reso disponibile gratuitamente.
Esistono diversi modi per implementare un Font Web Edge, ognuno dei quali ha il proprio elenco di pro e contro. In definitiva, mi piacerebbe vedere un'app Web simile a Typkit che consente di visualizzare in anteprima e sfogliare i caratteri senza essere forzati in Edge Code o Muse. Senza questo, probabilmente rimarrò su Google Web Fonts per la maggior parte del tempo.
Cosa pensi? Il nuovo servizio di font gratuito di Adobe è sufficiente per farti riflettere due volte sul passaggio alla tipica soluzione di font web? Perché o perché no?