Come utilizzare caratteri personalizzati con CSS usando la proprietà @font-face

 

Per migliorare la tipografia e la leggibilità del proprio blog o sito web, è sempre necessaria una buona combinazione di caratteri. A tale scopo, è possibile utilizzare dei caratteri personalizzati utilizzando la proprietà @font-face nel foglio di stile CSS del proprio blog. Trovando così il giusto e desiderato aspetto dei caratteri, i propri lettori potranno godere di una migliore leggibilità e di una migliore esposizione dei contenuti sul proprio blog o sito web.

Ci sono vari metodi per incorporare font personalizzati sul vostro sito web, ma quello che vedremo qui, è il modo più semplice ed efficace per usare font personalizzati con CSS. Non richiede conoscenze particolari se non un minimo di familiarità con CSS. Vediamo dunque come fare.

Fonts personalizzati in CSS con @font-face

Presupposto all’utilizzo della proprietà è quello di avere disponibile il font in formato True Type (. Ttf file).  Potete usare il vostro editor di testo per modificare il file del foglio di stile del proprio sito web o blog.

Esempio

Quindi riassumendo, aprire il file di stile CSS del proprio tema o sito web e aggiungere la proprietà @font-face nella parte superiore del file CSS. Tale proprietà definisce l’acquisizione di un tipo di carattere esterno in formato True Type.

Fatto semplicemente ciò, sarà ora possibile utilizzare il vostro tipo di carattere personalizzato in qualsiasi parte del vostro blog richiamandolo semplicemente tramite la proprietà font-family. È inoltre possibile utilizzare più i caratteri esterni nel medesimo modo, magari in parti diverse del proprio blog o sito web.

Esempio di utilizzo del font personalizzato

Buon lavoro!

pixolo ads
Cambia Copertina
4496 | Articolo pubblicato 4 anni fa nella categoria Css - Html.
Puoi seguire tutti i nuovi articoli e gli aggiornamenti di Pixolo.it attraverso i Pixolo feeds feed RSS.
Puoi inoltre lasciare un commento, oppure fare un trackback dell'articolo dal tuo sito.
  • iolanda

    Ciao complimenti per il tutorial, in rete si trovano solo scopiazzamenti vari senza un esempio realistico :)
    Però non riesco a farlo funzionare, spero potrai aiutarmi: vorrei usare per i titoli dei widget lo stesso font utilizzato nell’header, si chiama Cursive standard e l’ho preso da dafont.com (questo il mio sito http://iogurumi.altervista.org)
    Ho inserito nel style.css, dopo le stringhe iniziali:

    @import url(“../twentyeleven/style.css”);
    @import url(“icon-fonts.css”);

    la seguente stringa:

    @font-face {
    font-family: ‘Cursive standard';
    src: url(‘iogurumi.altervista.org/wp-content/themes/altervista/fonts/Cursive%20standard.ttf’);
    }

    Poi sono andata, sempre in style.css in widget-title e ho inserito la stringa font-family per utilizzarlo:

    .widget-title, .widget-title a {
    font-family: ‘Cursive standard';
    font-size: 25px;
    font-weight: 700;
    color: #0086ff;
    text-transform: none;
    }

    Dopo tutto questo ancora niente, non me lo visualizza. Dove sbaglio?

    • pixolo

      Ciao, utilizza una URL del font corretta, ovvero:
      http://iogurumi.altervista.org/wp-content/themes/altervista/fonts/Cursive_standard.ttf

      Rinominando il font ed eliminando lo spazio in: Cursive_standard.ttf
      Saluti

      • iogurumi

        grazie pixolo! Ho corretto e ora funziona! Però ho un altro problemino… come mai il font si vede male? Nel senso che le lettere invece di essere tutte attaccate, come dovrebbe essere in un font tipo scrittura a mano, appaiono tutte staccate. Come mai?

      • pixolo

        Non vedendolo mi riesce difficile interpretare il problema. Cmq è possibile che negli elementi dove viene applicato il font sia impostata ad esempio la proprietà css del “letter-spacing” che distanzia i caratteri tra di loro. Ciao

      • iogurumi

        grazie pixolo proverò a cercare la proprietà che mi hai suggerito.

3
SHARES
Be Sociable,
share and enjoy!
Resta aggiornato!
Segui Pixolo anche su Facebook!
Don't show more - I am already fan
×
Salva il post su Facebook
What is a Facebook Save Button?

The save button lets you save the current page to your private list on Facebook for a future use or consultation.
info | close
×