9 aprile 2015

Graphic Tricks #2: Fonts


Buongiorno lettori! Oggi è giovedì, e sapete cosa significa? Che è giunto il momento di un'altro appuntamento con Graphic Tricks, rubrica in cui io e Giusy cercheremo di aiutarvi a svelare i misteri che si celano dietro i codici html!

Non sapevamo bene su cosa incetrare l'appuntamento di oggi. Ci sono così tanti argomenti di cui potremmo parlare! Ma alla fine abbiamo pensato che la cosa migliore da fare sia procedere per piccoli passi, per questo la scelta è ricaduta sui google fonts e su come poterli utilizzare per modificare l'aspetto dei titoli dei post.

Pronti? Iniziamo!


Google, mette a disposizione alcuni font già caricanti sulla piattaforma blogger. Per poterli utilizzare come font del titolo dei nostri post basta seguire questi passaggi: →Modello →Personalizza →Avanzato →Titolo post.


Tuttavia Google da comunque la possibilità di aggiungere nuovi font a secondo dei nostri gusti ed esigenze!
La scelta è abbastanza ampia e si trova a questo indirizzo: http://www.google.com/fonts

Vediamo adesso come prelevare i font che abbiamo scelto di utilizzare.
Per esempio, scorrendo la lista ho notato i font Sigmar One e Kaushan Script. Li ho così aggiunti alla collezione cliccando sul pulsante Add to Collection accanto ad ogni preview dei font.
Adesso sono entrambi elencati in basso alla pagina, in Collection.

Una volta terminata la nostra scelta di font da utilizzare (ricordate, è buona norma non strafare troppo. Scegliete non più di due font perché il caricamento della pagina web del vostro blog potrebbe risentirne), clicchiamo sul terzo pulsante, Use, che si trova in basso a destra.

Scorriamo la pagina che sia apre, fino ad arrivare a 3. Add this code to your website. Qui possiamo prelevare il codice html che ci permetterà di usufruire dei font che abbia scelto. Nel mio caso il codice html è:
<link href='http://fonts.googleapis.com/css?family=Sigmar+One|Kaushan+Script' rel='stylesheet' type='text/css' />
Notate bene: vedete la parentesi a cuspide di chiusura del tag link (la parte colorata in rosso)? Lo slash che la precede l'ho aggiunto io. Serve a dire al brower che il tag link è stato chiuso. È necessario chiudere in questo modo il tag link se non si vuole incorrere in errori. 

Questo codice va direttamente inserito nel templete del nostro blog. Ricordando la puntata precedente di Graphic Tricks, i passaggi da seguire sono: Modello→Modifica html.
Si apre una pagina che permette di editare il templete del nostro blog.
Andiamo alla ricerca del tag <head> premendo ctrl+F
Una volta trovato, inseriamo sotto il tag <head> il codice html fornitoci da google font e salviamo il modello.


Adesso potremo utilizzare i nostri nuovi font dovunque vogliamo!
Se lo volessimo utilizzare come font dei titoli dei nostri post? Semplice!
Andiamo su →Modello →Personalizza →Avanzato →Aggiungi CSS, e scriviamo il seguente codice di stile.
h3.post-title{
     font-family: 'Kaushan Script', Times;
     font-size: 30px;
}
Con font-family: indichiamo quale famiglia di font utilizzare. Ci sono due cose da tenere a mente:
  1. Se il nome di un font è composto da più di una parola, è necessario racchiuderlo tra apici singoli: 'Nome Font'.
  2. Possiamo aggiungere più di una preferenza. Nel caso in cui, per esempio, non fosse possibile visualizzare il font Kaushan Script, il browser utilizzerà la seconda preferenza indicata (in questo caso il font Times).
Con font-size: indichiamo la dimensione con cui vogliamo che il font venga visualizzato. Io l'ho impostata a 30px ma naturalmente potete modificare a vostro piacimento! :D

Per oggi è tutto! Se avete bisogno di chiarimenti siamo a vostra disposizione. ;D
Nym and Giusy

17 commenti:

  1. Okay, comincio ad adorarvi seriamente. Soprattutto perchè le vostre spiegazioni sono così semplici che le capisco persino io!!
    Ho una domanda u.u (ed ecco che comincia...) ...ma il font scelto poi compare solo tra quelli da scegliere in Modello -> Personalizza
    oppure compare anche nella creazione di un nuovo post per sceglierlo ad esempio come font per il testo del post?
    Comunque mi sa proprio che domani comincio a sperimentare u.u Grazie ragazze <3 <3 <3

    RispondiElimina
    Risposte
    1. Ciao Gaia! :D
      Il font non compare nell'elenco che si trova in Modello->Personalizza, ma puoi comunque utilizzarlo ovunque tu voglia! Un modo per utilizzarlo anche nel contenuto del post è per esempio:

      <span style="font-family: 'Kaushan Script'; font-size: 15px;">il testo apparirà in Kaushan Script</span>

      il testo contenuto tra <span style="..." > e </span> apparirà con il font indicato in font-family. :D
      Ci sono anche altri modi ma quelli li lascio per un altro tutorial. ;)

      Elimina
  2. Ciao ragazze!!!! Che belli questi tutorial, non conoscevo questo metodo in particolare, ho sempre utilizzato @font-face, ma questo non mi sembra niente male.
    Grazie mille per la dritta ^_^

    RispondiElimina
    Risposte
    1. @font-face l'ho scoperto da poco! Ma non so dove "ospitare" i font che voglio utilizzare nella pagina web. All'inizio avevo pensato a dropbox ma non mi piace molto come soluzione. Tu dove ospiti i file che contengono i font?

      Elimina
  3. Spero che questi post mi faranno capire qualcosa sulla grafica xD

    RispondiElimina
    Risposte
    1. Speriamo di essere in grado di spiegare. XD

      Elimina
  4. Vi adoro!! *_* cercavo proprio un tutorial di questo tipo! Grazie grazie grazie! <3

    RispondiElimina
  5. Vi adoro!! *_* cercavo proprio un tutorial di questo tipo! Grazie grazie grazie! <3

    RispondiElimina
  6. ma ke carine!!!!!!!!!!!!!!!
    siete così chiare!!!! fantastiche *^* lo faccio subito!

    RispondiElimina
  7. Ma che bel blog *o* e spiegate veramente bene!!! L'unica cosa è che ho provato a fare come avete detto, ho scelto un font, l'ho copiato in html sotto head e ho aggiunto "/" quando poi vado a personalizza e cerco il font non esiste >.< ho anche copiato il codice per usarlo come titolo nel post non lo trova.. ci sono per caso solo alcuni font che si possono usare? Perchè ne ho provati tre e non capisco dove stia sbagliando ç_ç

    RispondiElimina
    Risposte
    1. Se cerchi il font nell'elenco non lo trovi inserito! Lo puoi usare solo tramite il codice css che trovi indicato nel post.
      Sembrerebbe tu abbia fatto tutto correttamente. :/
      L'unica cosa che mi viene in mente è provare ad aggiungere !important in questo modo, sempre in aggiungi CSS:

      h3.post-title{
      font-family: 'Kaushan Script', Times !important;
      font-size: 30px;
      }

      E poi in alto a destra cliccare su Applica al blog.

      Elimina
    2. Grazie per la risposta (-: Siccome il blog è di prova, all'inizio non ero entrata dentro i post, ma una volta fatto ho visto che cambiava il colore del font e il font che avevo scaricato e inserito! E' normale? Ecco uno stamp: pagina iniziale -> http://i.imgur.com/1DPB0th.png dentro il post -> http://i.imgur.com/GiaZ4ZW.png

      Elimina
  8. Ce l'ho fatta! :) grazie ragazze...siete un'ispirazione, io sono davvero negata con queste cose, ma grazie a voi sto cominciando a capirci qualcosa!!! Mi piacerebbe una puntata su come creare il rating personalizzato...

    RispondiElimina