• en
Crea Account Accedi
Hai perso la password?

oppure

Accedi con Facebook

Un unico account, centinaia di risorse gratuite!


oppure

Accedi con Facebook

Anche i migliori dimenticano qualcosa.


Ecco una raccolta di 10 Font Sans-serif gratis. I font sono rilasciati sotto licenza SIL Open Font, Public domain, GNU GPL e simili, quindi siete liberi di condividerli e usarli per progetti personali o commerciali.

Oswald

Cuprum

Lane

Lato

Miso

Quicksand

Sansation

Terminal Dosis

Ubuntu

Yanone Kaffeesatz

Articolo PrecedentePattern Geometrici ad Alta Risoluzione per Photoshop
Articolo successivoBusta da Lettere – PSD Alta Risoluzione
Gabriele Malaspina

Hi! I'm Gabriele Malaspina and I'm a UI and UX designer. I help medium and large companies to create digital interfaces. View my other posts.

Articoli Correlati

15 Commenti

  4. Anonimo

    Ciao Gabriele.
    Complimenti per il sito: veramente ben organizzato e interessante, Volevo chiederti: ho visto che hai utilizzato almeno uno dei fonts sopra proposti in questo stesso sito. Come lo hai implementato? L’ hai dovuto utilizzare come Cufon font oppure c’è un altro modo per incorporarlo? Utilizzo WordPress 3.2.1: puoi spiegarmi come posso usare questi fonts nei miei blogs? Grazie, ciao.

    • Gabriele Malaspina

      Ciao Kkri, grazie per i complimenti e benvenuto sul blog.
      Il font che sto utilizzando qui è Yanone Kaffeesatz, ed ho usato la tecnica del @font-face che è anche spiegata (male) in questo mio vecchio articolo:

      https://www.succodesign.com/?p=100

      Dovresti avere qualche base di web design, altrimenti se vuoi qualcosa di più semplice senza mettere mano ai codici, esiste qualche plugin per WP:

      http://wordpress.org/extend/plugins/wp-cufon/ (che utilizza tecnica Cufon, provato e funziona bene)

      http://wordpress.org/extend/plugins/wp-google-fonts/ (utilizza @font-face, provato, molto più semplice e sbrigativo)

      Se ti serve un aiuto chiedi pure.
      Bye.

      • Anonimo

        Ciao Gabriele, sono Cristina=kkri… 😉 Il metodo Cufon lo eviterei proprio, un po’ per non usare javascript e un po’ perchè lo avevo già provato in un sito e mi rallentava la visualizzazione del font “cufonizzato” 😉 facendo vedere quel bruttissimo scatto visivo dal font “normale” a quello Cufon. Mi sembra di vedere che da te il problema non ci sia, quindi ho deciso che il metodo @fontface mi piace e ho provato a fare come dicevi tu, ma non ci sono riuscita. Il problema è quando si tratta di dare il path del font e scrivere il nome esatto del font, a prima vista problemi banali, ma in rete molti si bloccano a quel punto. Ho guardato in giro per tutorials e tutti sono un po’ avari di dettagli quando si tratta di spiegare dove inserire nella struttura del sito i files del font-face font kit. Io ho scelto di mettere solo il Bold e il Regular del font YanoneKaffeesatz per cui ho caricato 8 files (.eot, .woff, ttf, svg per 2 famiglie) nella root del mio sito, sparsi tra gli altri files di WordPress (anche se preferirei metterli dentro una cartella Fonts), poi nel css del mio tema ho aggiunto i font-family (è giusto metterli entrambi, nome senza spazi e tra apici?) e poi in fondo ho messo pari pari il codice che ho scaricato da FontSquirrell. Copio/incollo come testo (non si possono allegare files o screenshots nei commenti con Disqus?), purtroppo un po’ lungo, ma così è più chiaro. Credo mi manchino poche dritte in realtà per arrivare alla meta (path, nome del font, se vanno dichiarati sia il Bold che il Regular, se servono gli apici), poi sarò felicissima di vedere il risultato! Grazie in anticipo! Ciao

        /* NELLO STYLE.CSS : SCELTA DEL FONT YanoneKaffeesatz */

        #content .entry-title {
        font-family: ‘YanoneKaffeesatzBold’,’YanoneKaffeesatzRegular’,Century Gothic, sans-serif;
        font-size: 22px;
        font-weight: normal;
        text-transform: uppercase;
        color: #b282ba;
        line-height: 1.3em;
        margin-bottom: 0;
        }

        /* PATH DEL FONT YanoneKaffeesatz */
        /* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 7, 2011 09:45:27 AM America/New_York */

        @font-face {
        font-family: ‘YanoneKaffeesatzRegular’;
        src: url(‘YanoneKaffeesatz-Regular-webfont.eot’);
        src: url(‘YanoneKaffeesatz-Regular-webfont.eot?#iefix’) format(’embedded-opentype’),
        url(‘YanoneKaffeesatz-Regular-webfont.woff’) format(‘woff’),
        url(‘YanoneKaffeesatz-Regular-webfont.ttf’) format(‘truetype’),
        url(‘YanoneKaffeesatz-Regular-webfont.svg#YanoneKaffeesatzRegular’) format(‘svg’);
        font-weight: normal;
        font-style: normal;

        }

        @font-face {
        font-family: ‘YanoneKaffeesatzBold’;
        src: url(‘YanoneKaffeesatz-Bold-webfont.eot’);
        src: url(‘YanoneKaffeesatz-Bold-webfont.eot?#iefix’) format(’embedded-opentype’),
        url(‘YanoneKaffeesatz-Bold-webfont.woff’) format(‘woff’),
        url(‘YanoneKaffeesatz-Bold-webfont.ttf’) format(‘truetype’),
        url(‘YanoneKaffeesatz-Bold-webfont.svg#YanoneKaffeesatzBold’) format(‘svg’);
        font-weight: normal;
        font-style: normal;

        }

        /* nella root del sito, files sparsi, senza cartella */

        YanoneKaffeesatz-Regular-webfont.eot
        YanoneKaffeesatz-Regular-webfont.woff
        YanoneKaffeesatz-Regular-webfont.ttf
        YanoneKaffeesatz-Regular-webfont.svg

        YanoneKaffeesatz-Bold-webfont.eot
        YanoneKaffeesatz-Bold-webfont.woff
        YanoneKaffeesatz-Bold-webfont.ttf
        YanoneKaffeesatz-Bold-webfont.svg

        • Gabriele Malaspina

          Ciao Cristina!
          Allora la tua procedura è più o meno corretta eccetto che nel foglio di stile dovresti prima dichiarare il @font-face e poi associare il font agli elementi (nel tuo caso: #content .entry-title). Quindi invece di metterlo in fondo al foglio di stile, mettilo in cima a tutto.

          Poi nel foglio di stile, nel @font-face dove dice “src: url” ci dovresti mettere il percorso (relativo o assoluto che sia, li puoi tranquillamente ordinare in una cartella).

          Ok che vuoi incorporare sia il Regular che il Bold, ma non avrebbe senso assegnarli entrambi all’elemento #content .entry-title. Cioè li carichi entrambi col @font-face ma poi li assegni singolarmente.

          Gli apici ci stanno 😉

          Comunque se intendi usare questo font Yanone ti converrebbe adoperare un’altra procedura, più snella:
          Si tratta di un font presente tra i Google Web Font:

          http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Yanone+Kaffeesatz

          Vale a dire che eviti di caricarlo sul tuo sito, mentre nell’head inserisci:

          In questo modo non dovrai usare più @font-face e il browser di un visitatore che ha già visitato un sito che usa la stessa tecnica e font (ad esempio Succo Design), non scaricherà nuovamente il font, ottimizzando quindi il caricamento.

          Sperando di essere stato chiaro 🙂

          Se hai bisogno di ulteriori delucidazioni non esitare a contattarmi, magari per email, così evitiamo pappardelle chilometriche 🙂

Lascia un Commento