Come aggiungere font e tipi di font scoiattolo al tuo sito web in 5 semplici passaggi

carattere scoiattolo

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.

 trova fontsquirrel font

 

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.

fontsquirrel scarica webfont kit

 

fontsquirrel 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:
  1. nomefont-webfont.eot,
  2. nomefont-webfont.svg,
  3. nomefont-webfont.ttf,
  4. nomefont-webfont.woff,
  5. foglio di stile.css

 

file di caricamento di font scoiattolo

 

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.

 

trova la famiglia di caratteri corrente

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.

 

Se stai cercando ispirazione per un font da usare, ecco i 25 font più caldi su Font Squirrel in questo momento.

Montserrat

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

Sans Aperte

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

Roboto

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

Raleway

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

Lato

5. Lato

Lato esiste da quasi 10 anni grazie alla sua efficacia, aspetto moderno e grande equilibrio.

https://www.fontsquirrel.com/fonts/lato

Bebas Neue

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

Poppins

7. Poppins

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

Grandi vibrazioni

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

Pennello di Alex

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

Sabbie mobili

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

Oswald

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

Fonte Sans Pro

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

Playfair Display

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

frullato

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

Script di Kaushan

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

Chunkfive

16. Chunkfive

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

Amatic

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

così

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

Lega Spartan

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

Metropoli

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

Pacifico

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

Aller

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

Josefin Sans

23. Josefin 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

Black Jack

24. Black Jack

Black Jack è un carattere fluido dall'aspetto informale. Potrebbe funzionare bene in progetti rilassati, comici o rilassati.

https://www.fontsquirrel.com/fonts/blackjack

Aragosta

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.

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?

A parte Helvetica, i caratteri più trendy da usare secondo Lifehack includono Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni e Didot.

 

 

L'autore
David Attard
Autore: David AttardSito web: https://www.linkedin.com/in/dattard/
David ha lavorato nel o intorno al settore online / digitale negli ultimi 18 anni. Ha una vasta esperienza nei settori del software e del web design utilizzando WordPress, Joomla e le nicchie che li circondano. In qualità di consulente digitale, il suo obiettivo è aiutare le aziende a ottenere un vantaggio competitivo utilizzando una combinazione del loro sito Web e delle piattaforme digitali disponibili oggi.

Un'altra cosa... Sapevi che anche le persone che condividono cose utili come questo post sembrano FANTASTICHE? ;-)
Fatti un 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.

Autore / i in primo piano su:  Inc Magazine Logo   Logo di Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   e molti altri ...