Opzioni per l'implementazione @ Font-Face
L'incorporamento di Webfont è così ampiamente supportato dai browser moderni a questo punto che non c'è davvero alcuna scusa per non incorporarli quando appropriato nei tuoi progetti. Ci sono centinaia di font gratuiti disponibili per l'incorporamento, oltre a numerosi servizi a pagamento che ti consentono di includere caratteri commerciali nei tuoi progetti.
Molti designer, a quanto pare, sono intimiditi dall'idea di @font-face comunque. Anche se sta guadagnando popolarità e supporto negli ultimi due anni, molti designer si attengono ancora alla loro solita collezione di font sicuri per la maggior parte dei loro progetti. Nella rara occasione in cui escono dalla loro zona di comfort e includono un font web, vanno semplicemente con un servizio di abbonamento a webfont piuttosto che esaminare l'incorporamento fai-da-te o qualcosa del genere Google Web Fonts .
In questo articolo, ti darò tutto ciò che devi sapere per iniziare a incorporare i tuoi font e per iniziare a utilizzare Google Web Fonts. Il codice stesso è semplice, e analizzerò esattamente il motivo per cui stiamo usando il codice che stiamo usando. Ti darò anche dieci grandi esempi di combinazioni di caratteri web che puoi implementare sui tuoi progetti nel caso in cui non ti trovi ancora a tuo agio con le combinazioni di caratteri.
Aspetti legali associati all'incorporazione dei caratteri
È importante iniziare con una discussione sui problemi legali che possono essere presenti quando si incorporano i caratteri sul tuo sito web. Non tutti i font sono concessi in licenza per quel tipo di utilizzo, in particolare i caratteri commerciali. Alcuni richiedono licenze estese, mentre altri ne impediscono la pratica tutti insieme (o vendono un servizio per gestire l'incorporamento per te).
È importante verificare l'EULA per qualsiasi carattere che si intende utilizzare per assicurarsi @font-face l'incorporamento è permesso. In caso contrario, dovrai scegliere un font diverso, scoprire se è possibile acquistare una licenza separata o vedere se uno dei servizi di font Web include il font preferito.
Opzioni per l'incorporamento
Incorporamento di caratteri con @font-face non è particolarmente complicato, ma è un processo in più fasi. Ci sono un paio di modi diversi per farlo, inclusi alcuni servizi gratuiti ea pagamento e un metodo completamente fai-da-te.
Incastonatura fai da te
Per i migliori risultati e il supporto browser più completo, ti consigliamo di utilizzare uno strumento come Font Squirrel's @font-face Generatore. Questo strumento gratuito ti consente di caricare qualsiasi tipo di carattere per cui hai le autorizzazioni appropriate e lo converte nei vari tipi di file di caratteri supportati per i diversi browser.
Una volta che hai il tuo pacchetto di font, vorrai caricarlo sul tuo server, probabilmente in una directory chiamata "fonts" o qualcosa di simile. Una volta caricato, entrerai nel CSS del tuo sito e includerai il seguente codice:
@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, questo si suddivide come segue:
font-family: "Dancing Script";
Questa parte specifica il nome del font in modo che possiamo chiamarlo più avanti nei nostri stili.
src: url("fonts/DancingScript.eot");
I file EOT sono supportati da Internet Explorer 4.0 e successivi. Senza questo file, il tuo @font-face l'implementazione non funzionerà nelle versioni di IE precedenti alla 9.0.
src: local("#"),
Questa linea impedisce il caricamento di un font locale, se ne esiste uno. Mentre alcuni programmatori preferiscono caricare il carattere locale per risparmiare larghezza di banda, il potenziale per causare problemi può superare i benefici. Se qualcuno ha una versione diversa del font installato localmente (o, per esempio, una versione poco pirata), potrebbe avere un impatto drastico sul design del tuo progetto. A mio parere, è meglio giocare sul sicuro e mantenere il pieno controllo su esattamente quale tipo di carattere carica.
url("fonts/DancingScript.ttf") format("truetype"),
I caratteri TrueType sono compatibili con Mozilla 3.5+, Safari 3.1+, Opera 10+ e Chrome 2.0+.
url("fonts/DancingScript.woff") format ("woff"),
Questo file .woff si prenderà cura di IE 9+, Mozilla 3.6+, Safari 5.1+, Opera Presto e Chrome 5.0+.
url("fonts/DancingScript.svg") format ("svg");
Questo formato finale si occuperà di Safari 3.1+, Opera 9+ e Chrome 0.3+. SVG è anche necessario per iPad e iPhone Safari, poiché attualmente non funziona con altri formati di font.
L'utilizzo di più formati dei tuoi font è importante per la massima compatibilità del browser. Abbiamo omesso i font OpenType (otf) qui, perché non aggiungono alcuna compatibilità che non esiste con i font TrueType (e i font TrueType sono compatibili con Chrome, mentre i font OpenType non lo sono).
Ora, quando sei pronto a chiamare il carattere nel tuo CSS, lo tratti come un normale font sicuro per il web.
h1 { font: 24px "Dancing Script", "Times New Roman", serif; }
Assicurati di specificare i caratteri di fallback in modo che, se per qualche motivo il carattere web non viene caricato (o che il visitatore stia utilizzando un browser non supportato), hai ancora almeno un certo controllo sul modo in cui il sito appare. In caso contrario, verrà caricato il carattere predefinito e troppo spesso si tratta di un carattere a spaziatura fissa come Courier New.
API di Google Web Fonts
Solo pochi mesi fa, il API di Google Web Fonts includeva solo un paio di dozzine di caratteri. Era bello se il font che volevi usare fosse incluso, ma per il resto non era di molto pratico utilizzo. Questo è cambiato.
Google ora ospita più di 230 famiglie di font, molte con più stili o pesi. E sono tutti liberi di usare. Questa è una grande risorsa per i progettisti che desiderano utilizzare i caratteri Web ma non necessariamente desiderano ospitare i propri caratteri stessi (probabilmente a causa di problemi di larghezza di banda).
Google offre tre metodi diversi per i caratteri inclusi: un metodo standard, che utilizza un link a un foglio di stile CSS nel tuo head , un @import metodo e un metodo JavaScript.
Indipendentemente da quale si decide di utilizzare, non è necessario registrarsi per alcun account speciale e l'acquisizione di caratteri è una procedura in un'unica fase (basta trovare il carattere desiderato e quindi fare clic su "Uso rapido" per ottenere il codice).
Servizi di carattere
Esistono numerosi altri servizi di carattere, come ad esempio Typekit e Caratteri Web di Fonts.com , molti dei quali sono basati su abbonamento. Le loro tariffe variano molto, così come i loro termini. Li abbiamo trattati in modo più dettagliato in a messaggio precedente .
Il motivo principale per utilizzare uno di questi servizi è quando qualsiasi carattere tipografico che si desidera utilizzare (o che è necessario utilizzare a causa delle specifiche del cliente) non è concesso in licenza per la normale @font-face incorporamento, ma è disponibile attraverso uno di questi servizi. Poiché alcuni dei servizi sono forniti da fonderie di tipi, c'è una selezione più ampia disponibile.
Per la maggior parte, questi servizi funzionano come l'API di Google Web Fonts per quanto riguarda l'incorporamento, sebbene ognuno di essi abbia il proprio metodo specifico. Un altro vantaggio è il supporto in caso di problemi con l'incorporamento o l'uso dei caratteri.
Quando usare @ font-face
A causa del supporto relativamente diffuso, @font-face può essere utilizzato praticamente su qualsiasi sito web. È un ottimo modo per mettere a parte un design altrimenti semplice e pulito tra milioni di altri design semplici e puliti. Può anche aggiungere carattere extra a disegni visivamente più complessi. Non c'è davvero nessuna scusa per non usare un font eccezionale per almeno i titoli dei siti che hai progettato.
Naturalmente, tutte queste nuove opzioni possono essere davvero intimidatorie per i designer che non sono tipografi esperti. Ma fortunatamente, ci sono un sacco di risorse là fuori per combinare caratteri tipografici che possono aiutarti a trovare le tue combinazioni. Nel frattempo, di seguito sono dieci combinazioni che puoi utilizzare in questo momento, composte da font gratuiti da Font Squirrel o Google Web Fonts API.
Incredibili combinazioni di webfont
Se non sai da dove iniziare a combinare i caratteri, prova queste combo per dimensioni.
Sito di fumetti
Ora non c'è assolutamente nessuna scusa per usare mai Comic Sans su un sito web!
Titolo di Komika | Colaborate la luce | Testo di Komika
Sito classico ed elegante
Questa combinazione è classica ed elegante, ma combinata con lo sfondo e la combinazione di colori giusti, può anche sembrare fresca e moderna.
Script danzante | Droid Serif | Droid Sans
Sito grunge
Il tipo di grunge è preferibile ai titoli, ma ciò non significa che non sia possibile trovare alcuni caratteri di qualità per il tuo altro testo.
Copystruct | cicle | Miso
Sito semplice e pulito
Semplice e pulito significava Helvetica. Non più.
Oswald | Attore | Luce terminale Dosis
Più grunge
Ecco un'altra alternativa per i siti in stile grunge. Anche questo funzionerebbe bene su un sito illustrato.
FFF TUSJ | Brawler | Prospettiva Sans
Sito retrò
Questa combinazione urla l'America della metà del secolo.
Yellowtail | Josefin Sans Semi-Bold 600 | Rokkitt
Sito femminile
Il femminile non deve necessariamente eguagliare la delicatezza. I dettagli su questi caratteri tipografici danno un tocco femminile senza essere sciatti.
Leckerli One | Frammento | amaranto
Sito funky e moderno
I caratteri funky aggiungono molto carattere. Assicurati solo di tenere a mente la leggibilità.
Rombo giallo | Andika | Puritano
Sito formale
Un sito più formale richiede tipografia più formale. Ecco una combinazione di uno script formale con caratteri tipografici serif e sans serif tradizionali.
Mandarino | Testo cremisi | Rosario
Siti unici e moderni
Un'altra coppia di caratteri unici e originali. Il contrasto tra gli angoli acuti del titolo e i font del corpo con i bordi arrotondati del meta-font è un bel tocco e aggiunge molto interesse.
GEOSTAR | Kelly Slab | Comfortaa
Conclusione
Come è già stato detto, non c'è davvero nessuna scusa per non lavorare con @font-face più. Le regole della buona tipografia si applicano ancora e tutto ciò che sai sulla combinazione dei font websafe continua. Hai solo molte più opzioni ora!
Quanto spesso usi @ font-face nei tuoi progetti? Fai il fai-da-te o usi un servizio? Condividi le tue esperienze e suggerimenti nei commenti!