Grazie a siti come Font Squirrel, puoi utilizzare qualsiasi tipo o stile di carattere che ti piace su un sito web. Le opzioni erano limitate a pochi caratteri web standard di cui tutti dovevano fare uso. Oggi ci sono molte più scelte disponibili. Non sei più limitato a pochi caratteri compatibili con il Web. Ora, i caratteri possono essere scaricati al volo semplicemente accedendo a un sito Web.
Siti web come Font Squirrel, con accesso a centinaia e migliaia di articoli, sono molto popolari. Il suo generatore di font web rende più facile che mai utilizzare invii di terze parti e creazioni curate.
Invece di usare caratteri tipografici standard come Arial, Calibri e Helvetica Neue, possiamo usare la regola CSS @ font-face. Questo ci consente di utilizzare qualsiasi carattere senza doverlo installare sui dispositivi dei visitatori. Questa è un'opzione eccellente che fornisce la libertà di espressione per il progettista del sito web e la massima usabilità per l'utente.
Per saperne di più: Come imparare CSS (Smashing Magazine)
Ciò ha reso estremamente facile aggiungere Font Squirrel e qualsiasi altro tipo di carattere scelto al tuo sito.
In questo tutorial, ti mostreremo come utilizzare Font Squirrel sul tuo sito web. Puoi utilizzare lo stesso concetto per aggiungere qualsiasi carattere tipografico al tuo sito, incluso FontAwesome.
Aggiungi Font Squirrel al tuo sito web
1. Trova il carattere FontSquirrel che desideri
- Visita Font Squirrel e seleziona Trova per cercare il carattere che desideri aggiungere.
- Seleziona quello che desideri utilizzare sul tuo sito web come parte del tuo web design. Puoi utilizzare le varie categorie per trovare il carattere tipografico che desideri utilizzare, trovare le aggiunte più popolari, aggiunte di recente, calde o di tendenza. Ce ne sono migliaia tra cui scegliere. Seleziona quello che funziona meglio per il progetto su cui stai lavorando.
2. Scarica il kit Font Squirrel WebFont
- Una volta selezionato il carattere che desideri utilizzare, fai clic sul pulsante WebFont Kit in alto a destra dello schermo.
- Fare clic su Scarica @ font-face kit.
Il download conterrà un file zip con una serie di file, incluso come utilizzare il carattere web, eventuali licenze associate a questo carattere tipografico Font Squirrel e, naturalmente, il file stesso.
3. Carica i file Font Squirrel sul tuo sito
- Estrai il file: verrà estratto in una cartella con il nome dell'elemento che hai scelto.
- Carica TUTTI i file nella cartella CSS del tuo sito web. Avrai un numero di file che devi caricare, tra cui:
- nomefont-webfont.eot,
- nomefont-webfont.svg,
- nomefont-webfont.ttf,
- nomefont-webfont.woff,
- foglio di stile.css
4. Aggiungi il carattere tipografico al tuo foglio di stile CSS
Il passaggio finale varierà leggermente a seconda di come vengono utilizzati i caratteri sul tuo sito. Troverai le definizioni del tuo carattere tipografico nel file CSS. Il file dovrebbe essere chiamato foglio di stile.css. Dovresti trovare il file CSS utilizzato sul tuo sito e aggiungere lì i file Font Squirrel utilizzando quanto segue. Aggiungi quanto segue al tuo file stylesheet.css, sostituendo:
@font-face {
font-family: 'FontName';
src: url('FontName-webfont..eot');
src: url('FontName-webfont..eot?#iefix') format('embedded-opentype'),
url('FontName-webfont.woff') format('woff'),
url('FontName-webfont.ttf') format('truetype'),
url('FontName-webfont.svg#FontName') format('svg');
font-weight: normal;
font-style: normal;
}Se hai caricato i caratteri nella cartella TIPI, il codice cambierà leggermente in:
@font-face {
font-family: 'FontName';
src: url('types/FontName.eot');
src: url('types/FontName.eot?#iefix') format('embedded-opentype'),
url('types/FontName-webfont.woff') format('woff'),
url('types/FontName-webfont.ttf') format('truetype'),
url('types/FontName-webfont.svg#FontName') format('svg');
font-weight: normal;
font-style: normal;
}5. Modificare le dichiarazioni CSS per utilizzare gli elementi FontSquirrel aggiunti
Dopo aver aggiunto le dichiarazioni di cui sopra al foglio di stile, sarà necessario modificarlo un po 'di più per utilizzare effettivamente il carattere tipografico. Dopo aver aggiunto il codice sopra, è necessario modificare ulteriormente il foglio di stile per utilizzare i nuovi tipi che hai aggiunto.
Fallo cambiando la famiglia di caratteri con il nome dell'opzione che hai scelto. Ad esempio, se desideri utilizzare il nuovo tipo con le intestazioni, trova il CSS dell'intestazione e modificalo di conseguenza.
Aggiorna la dichiarazione CSS con il nome FontSquirrel che hai scaricato.
h1,h2,h3,h4,h5,h6 {
color: #444;
text-decoration: none;
font-family: 'FontName', sans-serif;
}
Ovviamente puoi usare la famiglia di caratteri in qualsiasi tag CSS di cui hai bisogno!
Se hai seguito correttamente tutti i passaggi precedenti, una volta ricaricato il foglio di stile, dovresti avere il nuovo font Font Squirrel che hai appena aggiunto al tuo sito web!
In caso contrario, apri gli strumenti di sviluppo del tuo browser per verificare se tutti i file vengono acceduti correttamente. In caso contrario, ricontrolla il tuo CSS per assicurarti di aver digitato correttamente il nome del carattere.
Scopri come farlo come video di YouTube e come cambiare il carattere in qualsiasi tema WordPress.
25 caratteri più popolari su Font Squirrel
Se stai cercando ispirazione per un font da usare, ecco i 25 font più caldi su Font Squirrel in questo momento.
1. montserrat
Montserrat è un font urbano moderno disponibile in più pesi. Funziona da vicino ea distanza e potrebbe funzionare bene sul web.
https://www.fontsquirrel.com/fonts/montserrat
2. Sans aperte
Open Sans non dovrebbe aver bisogno di presentazioni. È uno dei caratteri più popolari al mondo ed è pulito, moderno e flessibile.
https://www.fontsquirrel.com/fonts/open-sans
3. Roboto
Roboto è un altro font web immensamente popolare grazie alle sue linee pulite, all'aspetto semplice e alla flessibilità.
https://www.fontsquirrel.com/fonts/roboto
4. Raleway
Raleway è simile nell'aspetto a Roboto ma è anche unico. Un altro font pulito e leggero che funzionerebbe bene in ogni situazione.
https://www.fontsquirrel.com/fonts/raleway
5. Lato
Lato esiste da quasi 10 anni grazie alla sua efficacia, aspetto moderno e grande equilibrio.
https://www.fontsquirrel.com/fonts/lato
6. Bebas Neue
Bebas Neue è un'interpretazione del font originale Bebas Neue di Ryoichi Tsunekawa. È un font molto attraente che è immensamente popolare.
https://www.fontsquirrel.com/fonts/bebas-neue
7. Poppin
Poppins è un font leggero e spensierato con un grande equilibrio. È anche completamente moderno, il che significa che potrebbe funzionare in molti design.
https://www.fontsquirrel.com/fonts/poppins
8. Grandi vibrazioni
Great Vibes è un carattere scorrevole in stile grafia che è ancora leggibile su schermi di dimensioni diverse. Questo si presta bene per essere utilizzato su modelli esclusivi.
https://www.fontsquirrel.com/fonts/great-vibes
9. Pennello Alex Alex
Alex Brush è un altro script di pennello scritto a mano scorrevole che è leggibile su schermi di dimensioni diverse. È un approccio più rilassato al tema con un fascino deciso.
https://www.fontsquirrel.com/fonts/alex-brush
10. Sabbie mobili
Sabbie mobili è leggero e capriccioso e ha un'atmosfera ariosa. Un misto di moderno e stravagante, il carattere potrebbe essere l'ideale in una vasta gamma di web design.
https://www.fontsquirrel.com/fonts/quicksand
11. Oswald
Oswald è un carattere più pesante, più enfatico che ha una grande leggibilità a diverse distanze. È anche semplice e moderno che funziona bene.
https://www.fontsquirrel.com/fonts/oswald
12. Fonte senza Pro
Source Sans Pro è un'evoluzione di uno dei primi font open source di Adobe. È stato modificato e migliorato costantemente, essendo questo uno dei migliori esempi.
https://www.fontsquirrel.com/fonts/source-sans-pro
13. Esposizione di Playfair
Playfair Display è un font più tradizionale con un tocco moderno. È ben bilanciato e potrebbe funzionare in tutti i tipi di situazioni.
https://www.fontsquirrel.com/fonts/playfair-display
14. Frappè
Milkshake è un carattere più pesante con un tema americano. Inizialmente è stato abbozzato con un pennello prima di trasformarsi in un font.
https://www.fontsquirrel.com/fonts/milkshake
15. Script di Kaushan
Kaushan Script ha un elemento asiatico che evoca visioni di Saigon negli anni '1930. È un bel font con un ampio appeal.
https://www.fontsquirrel.com/fonts/kaushan-script
16. Chunkcinque
Chunkfive è un nome descrittivo per questo carattere grosso. È un carattere in grassetto che ha un impatto e potrebbe funzionare bene per titoli o titoli.
https://www.fontsquirrel.com/fonts/chunkfive
17. Amato
Amatic ricorda la scrittura sulla lavagna o I Simpson, ma ha un carattere tutto suo. Potrebbe funzionare bene less siti web formali.
https://www.fontsquirrel.com/fonts/amatic
18. Allura
Allura è un altro font scritto a mano scorrevole che è molto piacevole alla vista. Un'attenta considerazione potrebbe fare un ottimo uso di questo carattere.
https://www.fontsquirrel.com/fonts/allura
19. Lega Spartan
League Spartan è un font senza fronzoli che ha molta presenza. Potrebbe funzionare perfettamente come titolo o all'interno di un invito all'azione.
https://www.fontsquirrel.com/fonts/league-spartan
20. Metropoli
Metropolis è un carattere geometrico moderno che è stato ovviamente influenzato da alcuni dei caratteri più popolari. Questa è un'ottima interpretazione.
https://www.fontsquirrel.com/fonts/metropolis
21. Pacifico
Pacifico è un carattere fluido e spensierato che evoca pensieri di Pepe jeans e dell'America degli anni '1960. È un font efficace in un contesto storico.
https://www.fontsquirrel.com/fonts/pacifico
22. Aller
Aller è un design pulito, leggero e moderno il cui angular l'aspetto si presta bene al web design moderno.
https://www.fontsquirrel.com/fonts/Aller
23. Josefín Sans
Josefin Sans riesce a combinare la modernità con il patrimonio e potrebbe essere un carattere molto flessibile in una vasta gamma di design.
https://www.fontsquirrel.com/fonts/josefin-sans
24. Jack nero
Black Jack è un carattere fluido dall'aspetto informale. Potrebbe funzionare bene in progetti rilassati, comici o rilassati.
https://www.fontsquirrel.com/fonts/blackjack
25. Aragosta
L'aragosta ha l'aspetto di un marchio, forse del New England o da qualche parte in riva al mare. Un ottimo font da usare se il design si adatta.
https://www.fontsquirrel.com/fonts/Lobster
Domande frequenti
Cos'è Font Squirrel?
Font Squirrel è un repository di caratteri web provenienti da creatori gratuiti e open source. Tutti i font possono essere scaricati e utilizzati gratuitamente, anche commercialmente.
Come faccio a scaricare i caratteri web da Font Squirrel?
Scaricare i caratteri web da Font Squirrel è facile. Identifica il carattere che desideri utilizzare, scarica il file contenente il carattere. Carica i file sul tuo host web e includi il nome del carattere nel tuo stylesheet.css. Quindi prova per assicurarti che il tuo carattere venga caricato.
Qual è il carattere più popolare in questo momento?
Il carattere più popolare in questo momento è Helvetica. Secondo Wired, Helvetica è il font più popolare al mondo nonostante abbia 62 anni.
Qual è il carattere più trendy da usare?
Oltre a Helvetica, i caratteri più trendy da utilizzare secondo Lifehack includono Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni e Didot.
Come usare il carattere scoiattolo?
Dopo aver scaricato il carattere che desideri utilizzare, puoi caricarlo sul tuo sito Web e quindi creare il CSS con il carattere secondo le istruzioni sopra per includere questo carattere tipografico nel tuo sito Web.
Per favore, lasciare un utile commenta con i tuoi pensieri, quindi condividi questo articolo sui tuoi gruppi di Facebook che lo troverebbero utile e raccogliamo insieme i frutti. Grazie per la condivisione e per essere gentile!
Disclosure: Questa pagina può contenere collegamenti a siti esterni per prodotti che amiamo e consigliamo vivamente. Se acquisti prodotti che ti suggeriamo, potremmo guadagnare una commissione per segnalazione. Tali commissioni non influenzano le nostre raccomandazioni e non accettiamo pagamenti per recensioni positive.
e molti altri ...