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.
Un esempio lampante lo trovate proprio in questo Blog, alla pagina portfolio.
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 www.fontsquirrel.com 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!
@font-face {
font-family: 'crysta';
src: url('crysta-webfont.eot');
src: local('☺'), url('crysta-webfont.woff') format('woff'), url('crysta-webfont.ttf') format('truetype'), url('crysta.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
Tutto qua, ed avrete il font personalizzato a dovere anche sul vostro sito o template!
Ottimo tutorial e ottimo sito! complimenti!!
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
Pingback | Ecco chi ha segnalato questo post nel proprio blog:
Tweets that mention Come inserire, in modo corretto, un font personalizzato nel vostro sito! Font-face | minimamente -- Topsy.com
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à!!
Quali browser lo supportano al momento?
Ciao Kikkozzo, al momento credo che NON sia compatibile solo su I.E. 6 ho testato la soluzione su i vari sistemi operativi e browser e sembra egregiamente funzionare
Ti ringrazio, farò alcuni test. Io pensavo che lo supportassero solo Opera e Chrome.
mi inserisco solo per dire che su questo sito
http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
è scritto invece che, da internet explorer 5.5 in avanti, “@ font-face” è supportata..
spero di non aver detto una cavolata..
Perfetto! Quindi la mia certezza a trovato un fondamento! Grazie Walsh!
figurati, dovere..
@ 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…=(
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!!
Visto! Vedo che funziona qua su Mac con Chrome!
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
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]
paradossale!
ora va su chrome, firefox, opera ma non su safari!
Ho vuotato la cache per sicurezza, ma niente da fare!
boh!!
No! A me funziona e anche bene! W gli AC/DC non per dire è anche il mio gruppo preferito!
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?
Bè sinceramente va + che bene il sito ed anche il caricamento
ok ti ringrazio allora!
avevo proprio bisogno di un parere da parte di un webmaster esperto come te!!
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!
eheh ok
boh, non mi ha caricato il codice..
comunque ho usato il tag object, strutturato molto similmente all’embed che mi ha dato tu!
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!
assicurati che il nome corrisponda perfettamente!
Provate Font2Style, un sito semplice e veloce con centinaia di font pronti da usare!
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
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è ../../../../