Font Your Face

Ritratto di Vanni

Ci sono 2 soluzioni quando vogliamo inserire nuovi font nel nostro sito web: o mettere mano ai fogli di stile o usare il modulo di Font Your Face. Andare ad inserire nuovi famiglie di font, tramite la modifica dei fogli di stile, può risultare complicato, e diventare persino snervante, perché basta uno spazio in più o un apice in meno che il giochino non riesce.

Consiglio quindi l’uso di Font Your Face che potete trovare qui, ma per funzionare ha bisogno di Views. Questo modulo ha molte funzionalità ed è altamente configurabile, quindi andrò a descrivere solo un semplice esempio.

Descrizione d'uso del modulo Font Your Face

  • Installare ed abilitare i moduli
  • Il modulo è suddiviso in varie sezioni, le prime di 2 devono essere abilitate, le altre si abilitano solo se necessario, ad esempio abbiamo la possibilità di abilitare dei “collegamenti” con dei provider di font, oppure, se abbiamo già i file dei font che vogliamo usare basta abilitare la sezione “Local Fonts
  • pagina di abilitazione modulo font your face e delle sue sotto-sessioni
  • L’abilitazione dei provider può richiedere più tempo perché Drupal deve scaricare le API per i vari font
  • barra di progressione download delle API dei font
  • In questo esempio uso 2 font che ho già nel mio computer
  • Andare nella pagina di configurazione
  • Nella sezione “General” troviamo l’elenco di eventuali  provider abilitati e alcune impostazioni avanzate
  • pagina di configurazione modulo, sezione "General"
  • Cliccare in alto a destra su “import local font
  • Inserire il nome/famiglia del font, lo stile e il peso che vogliamo usare, scegliere, tramite apposito pulsante, il file del font che vogliamo caricare e alla fine cliccare salva
  • Attenzione: non tutti i tipi di file sono supportati da tutti i browser, sotto alle varie caselle di scelta dei font c’è una breve nota esplicativa, per maggiori informazioni rimando a questa pagina
  • pagina di configurazione modulo, sezione "import local font"
  • Andare in menu amministratore/aspetto e scegliere font-your-face in alto a destra
  • Qui troviamo i file che abbiamo caricato, abilitare i font che vogliamo usare e poi cliccare “By CSS selector” per scegliere a quali tag del testo andremo a cambiare il font
  • pagina di abilitazione dei vari font e assegnazione dei selettori CSS
  • In questo esempio ho assegnato il primo font a tutti i tag headers e il secondo font al testo standard
  • Nel caso avessimo abilitato alcuni provider per i font, potremo andare a sceglierli cliccando in “browse to enable more font
  • pagina abilitazione font con nuovi font attivati e pulsante per selezionare API font

Risultato finale: Pagina con i nuovi font

Questa è la pagina originale con tre frasi: una normale, una in stile italic e una in grassetto

Pagina pubblicata con font di default del browser

E questa è la stessa pagina, dopo avergli assegnato i nuovi font:

Stessa pagina pubblicata ma con l'inserimento dei nuovi font per titoli e testo

Commenti

non funziona

Ciao, ho un problema e non riesco a venirne a capo.
In pratica non riesco a cambiare la font al sito, seguendo tutto alla lettera ( oltretutto semplicissima procedura..) eppure mi cambia al massimo il menu di amministrazione di drupal, ma niente da fare per quanto riguarda il sito...

dove sbaglio??

Ritratto di Vanni

Salve Gio, effettivamente il

Salve Gio, effettivamente il tuo problema mi spiazza un po'. Hai provato a controllare che il tipo di file del font sia supportato dal tuo browser? Hai provato ad utilizzare font scaricati nel pc e non da qualche provider? Hai controllato di aver assegnato quel tipo di font ai vari tag html (es p, div, section ecc...) che sono presenti nel body della tua pagina? Puoi provare ad assegnare il nuovo font a determinati tag che usi nella pagina tramite ID od una Class. Altre idee su come potresti risolvere non me ne vengono, di solito in queste occasioni vado per tentativi.

Aggiungi un commento

Filtered HTML

  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.

Comment

  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente

Plain text

  • Nessun tag HTML consentito.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Linee e paragrafi vanno a capo automaticamente.
Per tutelare la vostra privacy suggerisco l'uso di un nickname o lasciare anonimo...
CAPTCHA
Questa domanda e' per testare se sei un visitatore persona e non un software che genera spam
1 + 8 =
Risolvi la semplice domanda di matematica e inserisci il risultato. Es. se e' 1 + 3 inserisci 4.