Come inserire, in modo corretto, un font personalizzato nel vostro sito! Font-face

Ho visto in rete tantissimi tutorials che spiegano come inserire un font personalizzato nel proprio sito web, ma qual’è il metodo veramente sicuro per poterlo visualizzare in tutti i browser? Semplice, usare la regola CSS @font-face. Ora vi spiego come fare.

Trovare il font adatto

La prima cosa che dovete ovviamente cercare è quella di trovare il Font adatto al vostro scopo. Assicuratevi che sia Free e di libero uso, esistono molteplici siti che permettono si trovarli.

Una volta che lo avete individuato scaricatelo nel vostro Desktop e per renderlo compatibile nel web recatevi su questo sito transfonter.org poi fate l’upload del vostro Font, generate il Font ed il gioco e fatto. Vi compariranno ben 4 voci con la relativa estensione.

Queste sono tutte le estensioni che vi servono. Ora basta implementarlo nel vostro foglio di stile, solitamente style.css. Nell’esempio ho usato il font “Crysta”.

Regola CSS molto Cross-Browser

Ecco che nel vostro style CSS dovrete inserire questa stringa, assicurandovi che il nome corrisponda esattamente a quello dei 4 file generati, attenzione perché è case-sensitive, ovvero riconosce maiuscole e minuscole!

https://gist.github.com/miniMAC/c8bc0c86393077343bcf0f460ce0221a

Tutto qua, ed avrete il font personalizzato a dovere anche sul vostro sito o template!

52 commenti

  2. Tutorial utile e anche molto semplice, grazie mille, spero farai anche qualche tutorial su qualcosa di più complesso come il montaggio di un sito. =D

  4. Ciao!
    Innanzitutto grazie per il tutorial, stavo diventando scemo a forza di cercare questa soluzione!!

    però..c’è sempre un però..cioè non riesco ad ottenere il risultato finale, cioè il font che ho scelto non mi viene visualizzato.

    Questo il sito: http://theaceofdc.altervista.org

    La scritta nel font particolare è “Welcome”

    Questo il mio procedimento:

    1) Upload su fontsquiller del Font (nel mio caso “Squealer”)

    2) Download del pacchetto fornito da fontsquiller

    3) Upload del suddetto pacchetto nella root del mio sito

    4) aggiunta della stringa nel file style.css

    Risultato: NON funziona.

    Dove avrò sbagliato?

    Grazie in anticipo per la disponibilità!!

  6. @ kikkozzo: non ho capito se è rivolta a me la domanda che hai fatto, comunque ne approfitto per aggiungere dei dettagli.

    Sul mio computer (macbook), ovviamente, riesco a vedere il font con qualsiasi browser usi (safari, firefox, chrome o opera).

    Una soluzione al mio problema, al momento l’ho trovata, ma credo che soluzione definitiva non possa essere: semplicemente, ho messo un link da cui l’utente, che accede al sito, può scaricare il font e installarlo. Dopo il refresh lo dovrebbe vedere.

    Ma la soluzione di miniMac è l’ideale, solo che non ci riesco…=(

  7. Scrivo per aggiornare la situazione.

    Sono riuscito finalmente ad arrivare alla soluzione, ora fortunatamente il font è correttamente visualizzato sui browser, anche nei diversi sistemi operativi.

    Era, come immaginavo, un ‘grossolano’ errore, cioè gli url che avevo specificato non erano completi, o meglio, corretti.

    Per fortuna ora è risolto!

    Grazie lo stesso e scusate la lungaggine dei commenti eheh =)

    Buon proseguimento a tutti voi!!

      • Grazie!

        Ti potrei chiedere un’altra cosa? che però non c’entra col font-face..

        Se hai visitato quel sito con chrome, credo che tu non abbia potuto sentire un piccolo audio che parte quando accedi alla home (si tratta di pochi secondi..).Se provi con safari o firefox o opera ti funziona.

        Ho inserito l’mp3 con il tag “object”, però con chrome, su mac (non ho ancora provato su windows), non parte, e mi visualizza un “?” dove dovrebbe esserci il player.
        Per IE ho risolto mettendo il wav, ma con chrome non so come fare..

        tralasciando il discorso sulla pesantezza e lentezza di caricamento (è circa 600 kb il file mp3), esiste una soluzione per far leggere l’mp3 da chrome, che tu sappia?

        grazie in anticipo!!

    • Sono alle prese anch’io con il problema fonts … ma non mi ci raccapezzo…puoi spiegare BENE ( se puoi ) qual’era l’errore?
      Io ho scaricato il kit , l0ho decompresso in una cartella “font” che ho caricato sul sito , dove ho il file index e i vari file.png . Il kit comprende già il file stylesheet.css con il codice . Non soi se devo aggiungere altro all’HTML . Help me! 🙂

      • Scusa il ritardo! 🙂

        Il codice css lo devi mettere in testa possibilmente nel file style.css (di solito si chiama così) del tuo tema/template cosi sei sicuro che viene caricato perfettamente.

        Poi sempre nel css devi specificare bene la “path” del background url a volte dipende dove risiede la directory, ovvero:

        Backgorund: url(../miacartella/immagine.png)

        a volte invece può essere

        background: url(../../miacartella/immagine.png)

        però dovrei capire bene e se magari hai un link posso anche darti il consiglio giusto 🙂

  8. mmm, prova ad usare questo esempio e non metterlo come “object” ovvero come segue:

    [html]<embed src="nomefile.mp3" controls=all autostart="true" loop="true" width="300" height="25">[/html]

        • su safari?? a me no! perché poi..vabbeh!

          comunque meglio così se a te va, vuol dire che è il mio che fa le bizze!

          e comunque sei doppiamente un grande dato che sei anche un fan degli ACDC!!

          P.S.: il sito ti garba? o è un po’ troppo lento a caricarsi?

    • ho risolto anche il problema dell’mp3 per safari.

      Io uso l’ultimo safari, v.5.0.2..può essere che il tag non l’accetta.
      Allora ho risolto così

      In questo modo funziona.

      Ma con Firefox e Opera ne apre due di file, con effetto di eco!

      Che casino..tu che versione di Safari usi? la stessa mia?

      • Bè questo è dovuto al fatto che solo un file deve avere la proprietà [html]autostart="true"[/html]

        Di conseguenza devi mettere alle altre musiche la proprietà [html]autostart="false"[/html]

        Cosi vedrai che risolvi sicuramente! Non credo che dipenda dalla versione di Safari, dovrebbe andare anche con le vecchie versioni!

        • Bon, ho risolto definitivamente.

          Non ho più messo il tag embed, ma uso solo più il tag object..e vai a sapere perchè, ora me lo leggono tutti i browsers..mah, ogni tanto valli a capire sti browsers!!

          Comunque ti ringrazio per la disponibilità, e scusami se ti ho rotto un po’ le scatole!

  11. CIao.. forse visto che il post è datato non risponderà nessuno ma io non riesco a farlo funzionare!
    Anticipo che il sito su cui sto lavorando è basato su WordPress, Ho incollato la stringa di codice nel file css (quella che mi genera automaticamente Font Face) e copiato i 4 file del kit nella cartella che credo essere quella giusta (ovvero dove risiede il mio css) ma non va

    Dove sbaglio?!

    Grazie!

  13. Ciao a tutti,
    ho seguito i consigli di Minimac,con un sito in joomla 2.5. Risultato: si vede perfettamente IE 8 ma non funziona su IE 7 … il formato font per Explorer dovrebbe essere il .eot … mi confermate? Avete qualche idea?

    Grazie

  14. Ciao,
    sto provando a realizzare un sito e ho trovato molto utile la regola spiegata.
    Una sola informazione ti chiedo, dovendo inserire vari font e volendo tenere una certa pulizia nelle directory è possibile mettere tutti i font nella dir “font” ed inserire il seguente url: src: url(‘/fonr/crysta-webfont.eot’).
    Grazie in anticipo per l’attenzione

    • Ciao Franco, certamente. non conosco bene i tuoi percorsi ma credo tu debba inserire nel caso una ulr completa ovvero: http://www.tuosito.com/font/ oppure se cartella superiore nel CSS puoi mettere cosi:

      url(../../../font/crysta-webfont.eot)

      in questo caso dipende dal numero di cartelle da raggiungere però quindi potrebbe essere anche solo ../../ anzichè ../../../../

  15. ciao miniMAC mi sai dire come mai il font che ho scaricato appare leggermente diverso una volta caricato sul sito?
    Sarebbe il cursive standard presente su dafont, le lettere appaiono tutte staccate non capisco perché.
    Secondo te come mai?

  16. Ciao miniMAC, ma i font particolari es:Magnola light quelli che non tutti hanno istallati nei temi del loro pc con questo metodo non si vedono. Ho seguito la procedura sul mio sito ma il font mi appare solo se sul pc di chi visualizza il sito è istallato il tema…c’è soluzione o è proprio cosi? grazie

    • Ciao Massimiliano,

      molto probabilmente hai inserito male i fonts, quindi non viene trovata la cartella dei fonts su tuo server, ma per esserne sicuro al 100% passami il link dove posso vedere il codice e dirti se ci sono errori!

  17. Esempio (che funziona):
    ———————————————————————————————————————————-
    @font-face {
    font-family: ‘pippo’;
    src: url(‘pippo-webfont.eot’);
    src: local(‘?’), url(‘pippo-webfont.woff’) format(‘woff’), url(‘pippo-webfont.ttf’) format(‘truetype’), url(‘pippo.svg#webfont’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }
    ———————————————————————————————————————————-

    Dopo aver scelto il carattere da usare (ad esempio pippo.ttf) andare sul sito: http://www.fontsquirrel.com
    Cliccare su: [+Add Fonts] e scegliere il font
    lasciare su OPTIMAL
    spuntare: Yes, the fonts I’m uploading are legally eligible for web embedding.
    cliccare su: Download Your Kit
    salvare il file.zip

    Un CSS speciale @ font-face aiuta i vari browser selezionare il tipo di carattere appropriato usando il seguente codice:

    @font-face{ font-family: ‘MyWebFont’; src: url(‘WebFont.eot’); src: url(‘WebFont.eot?#iefix’) format(‘embedded-opentype’), url(‘WebFont.woff’) format(‘woff’), url(‘WebFont.ttf’) format(‘truetype’), url(‘WebFont.svg#webfont’) format(‘svg’); }

    Quindi, fate il collegamento al foglio di stile nel codice HTML:

    body{
    font-family: ‘MyWebFont’;
    }

  18. Ciao, innanzitutto complimenti per il sito, davvero ben fatto.
    A proposito del tuo tutorial (molto chiaro tra l’altro), io ho un problema che mi affligge dall’inizio del mio sito: usando Blogger, e di conseguenza non avendo una mia root dove caricare suddetti font, come li linko?
    Che servizio posso usare, che non ne trovo neanche uno che funzioni a dovere? Grazie in anticipo

    MatRiz

    • Ciao Matriz, come servizio non saprei, ma mi viene da pensare che potresti usare la CDN di Google per i Fonts, ovvero i Google Web Fonts.

  20. Ti ringrazio son finita nel posto giusto mi hai risolto con il tuo articolo e con i commenti a seguito un gran problema! 😉

  21. Ciao, ho seguito i passaggi da te descritti nell’articolo, ma mi manca l’ultimo passaggio. Cioè, dopo aver caricato i file e dopo aver modificato il CSS, come faccio per applicare il font a un determinato testo?
    Grazie in anticipo!

    • Ciao Giovanni, è semplicissimo, puoi creare una classe nel CSS dove dentro ci metti la regola e assegni il font, per esempio: .miaclasse { font: ‘Helvetica’; }

  22. Ciao, premetto che non sono un esperto, quindi la mia domanda potrebbe essere sciocca. =)
    Io ho un font personalizzato creato da me. Mi confermi che con il metodo descritto in questo articolo riesco ad utilizzarlo nel mio sito?

  24. Ciao Emmanuele,
    prima utilizzavo un Verdana, adesso ho cercato di installare un Myriad. Quando usavo il Verdana, riuscivo a visualizzare il testo Normal. Ho questa guida e quella di HTML.it (rendendo compatibile la proprietà con tutti i browser). Adesso la proprietà funzionicchia, nel senso che quando vado a sostituire il Verdana con il Myriad, mi visualizza soltanto il Myriad in BoldItalic!!! E nel CSS non c’è niente che abbia la proprietà “italic” eccetto i titoli del menù laterale, quindi vorrei capire da dove spunta fuori questo “italic” e risolvere il problema…

  25. Ciao, avrei bisogno di una precisazione.Ho scaricato i file del font.ma questi file dove devo salvarli? l’url, specificatamente, da dove devo prenderlo?

    • Ciao Davide, i font che scarichi scegli tu dove metterli. Di solito si fa anche una cartella “fonts” e si richiamano da la dentro!

Lascia una risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *