[HTML] Inserire nuovo font con @font-face

Shyson

Utente Attivo
19 Ago 2012
1.171
1
38
Codice:
/* Se il font è già presente nel browser lo pesca da lì, se non c'è lo pesca dalla directory, questo evita un doppio caricamento */
@font-face {
    font-family: SnellRoundhand;
    src: local ('SnellRoundhand'),
        url('http://TUOSITO/wp-content/themes/wp-portfolio/font-awesome/snell-roundhand/SnellRoundhand.ttf') format('truetype'),
        url('http://TUOSITO/wp-content/themes/wp-portfolio/font-awesome/snell-roundhand/SnellRoundhand.eot') format('embedded-opentype'),
        url('http://TUOSITO/wp-content/themes/wp-portfolio/font-awesome/snell-roundhand/SnellRoundhand.woff') format('woff');
}
Ho letto l'articolo su questo sito che parla di come inserire un font personalizzato in modo che tutti i browser lo vedono, in caso non c'è l'abbiano di default.

Io ho trovato questo codice e volevo sapere se è scritto giusto. In pratica questo css trova il font personalizzato che è stato inserito nella directory, nel mio caso nel tema di WordPress, lo carica direttamente dal browser in caso ci sia già, oppure dalla directory.
Questo metodo fa in modo che non ci sia un doppio caricamento in caso il font sia già di default nel browser.

Vorrei una conferma se è scritto giusto:
 
Ultima modifica:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
Si va bene!
Occhio anche agli errori di ortografia
 

Shyson

Utente Attivo
19 Ago 2012
1.171
1
38
Non mi sembra ci siano errori di ortografia. Ho voluto fare una prova, ho caricato l'url completo del font ma mi da pagina non trovata, eppure la directory è corretta e il font è nel server.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
Non mi sembra ci siano errori di ortografia
Ce ne sono! Ce ne sono!
Posta il codice che hai usato, potrebbe esserci qualche carattere sbagliato o mancante.
Sei sicuro che il percorso sia scritto bene?
Dai un occhio anche QUI
 
Ultima modifica:

Shyson

Utente Attivo
19 Ago 2012
1.171
1
38
Ce ne sono! Ce ne sono!
Posta il codice che hai usato, potrebbe esserci qualche carattere sbagliato o mancante.
Sei sicuro che il percorso sia scritto bene?
Dai un occhio anche QUI

l percorso era sbagliato, ora va bene. Dal tuo link è impostato in altro modo, ma di base è uguale, mi sembra. Ho preso spunto da questo sito: https://developers.google.com/web/f...content-efficiency/webfont-optimization?hl=it

Codice:
@font-face {
    font-family: SnellRoundhand;
    src: local ('SnellRoundhand'),
           url('https://miosito.it/wp-content/themes/wp-portfolio/font-awesome/snell-roundhand/SnellRoundhand.woff2') format('woff2'),
           url('https://miosito.it/wp-content/themes/wp-portfolio/font-awesome/snell-roundhand/SnellRoundhand.woff') format('woff'),
           url('https://miosito.it/wp-content/themes/wp-portfolio/font-awesome/snell-roundhand/SnellRoundhand.ttf') format('truetype'),
           url('https://miosito.it/wp-content/themes/wp-portfolio/font-awesome/snell-roundhand/SnellRoundhand.eot') format('embedded-opentype');
}
 
Ultima modifica:

Shyson

Utente Attivo
19 Ago 2012
1.171
1
38
Quello di prima non era corretto, non trovava il font nella cartella personale, ma solo nel browser in caso ci fosse. Questo funziona:

Codice:
@font-face {
    font-family: SnellRoundhand;
    src: local ('SnellRoundhand');
    src: url('https://miosito.it/wp-content/themes/wp-portfolio/snell-roundhand/SnellRoundhand.woff2') format('woff2'),  /* Browser super moderni */
         url('https://miosito.it/wp-content/themes/wp-portfolio/snell-roundhand/SnellRoundhand.woff') format('woff'),  /* Browser abbastanza moderni */
         url('https://miosito.it/wp-content/themes/wp-portfolio/snell-roundhand/SnellRoundhand.ttf') format('truetype'), /* Safari, Android, iOS */
         url('https://miosito.it/wp-content/themes/wp-portfolio/snell-roundhand/SnellRoundhand.eot') format('embedded-opentype'), /* IE9 */
         url('https://miosito.it/wp-content/themes/wp-portfolio/snell-roundhand/SnellRoundhand.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
}

.testo {
    font-family: SnellRoundhand, times, arial;
    font-size: 1.1em;
    font-style: normal;
    color: #118040;  
}
 
Discussioni simili
Autore Titolo Forum Risposte Data
A inserire variabile php colore in div html PHP 2
napuleone [HTML] type="file" inserire path di partenza HTML e CSS 4
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
M [PHP] Come inserire codice html in un ciclo while PHP 2
D [Javascript] [HTML] Inserire slash dopo 3 numeri Javascript 5
A [HTML] Come inserire google review stars nelle pagine del mio sito HTML e CSS 0
andreas88 [HTML] come inserire 3 riquadri in un unico rigo (vedere img allegata) HTML e CSS 11
M [wordpress-galleria immagini]Inserire classe php in html PHP 0
M [HTML] Inserire un div tra altri div già esistenti HTML e CSS 7
nab23 Inserire 'share bottons' in un sito html/css HTML e CSS 7
T [HTML] Inserire barra di ricerca che ricerca solo le pagine del proprio sito HTML e CSS 6
Bubà [HTML] Widget per inserire instagram a lato del blog HTML e CSS 1
E [PHP] inserire HTML in una stringa PHP 16
F [HTML] Inserire testo all'interno di una div con border radius HTML e CSS 2
L inserire una pagina html al di fuori del CMS HTML e CSS 3
L Inserire Script Jquery in immagine html con zone cliccabili jQuery 2
B Inserire codice html per visualizzazione in altro sito web HTML e CSS 3
L [PHP/HTML] Inserire metodo di pagamento PHP 4
Devil-94 Javascript: script che permetta di inserire immagini in un certo elemento html. Javascript 2
E come inserire un codice html su facebook HTML e CSS 4
T [risolto]Inserire in una variabile del codice HTML e poi cercare in quella variabile con getelements Javascript 8
D Inserire una pagina html nel proprio sito tramite il cms di prestashop CMS (Content Management System) 0
C Inserire Valori Da Un File Js In Una Tabella Html Javascript 19
voldemort Inserire commenti in HTML HTML e CSS 5
M inserire un calendario settimanale su una pagina html, aggiornabile dall'esterno. HTML e CSS 11
J Inserire codice javascript in html Javascript 3
A Inserire codice html gooole maps in una variabile php PHP 1
B Inserire codice html di un banner su pagina web HTML e CSS 1
M Inserire in text Html valore variabile asp Classic ASP 3
asevenx inserire tag html con un file esterno HTML e CSS 2
B Inserire video in un'immagine in una pagine HTML HTML e CSS 3
A inserire xml in html HTML e CSS 0
A inserire xml in html? XML 5
J inserire oggetto flash in pagina html, cambiamenti? Flash 0
U Come inserire un video mpeg in una pagina html valida?? HTML e CSS 1
D inserire sfondo con l'html HTML e CSS 1
F Inserire HTML del document in una variabile Javascript 4
C inserire ora e data in file html generato da javascript Javascript 5
G Inserire il contenuto di un'altro sito all'interno di una tua pagina html HTML e CSS 1
C html: inserire codice banner HTML e CSS 0
X inserire file.class in html HTML e CSS 2
K File audio in html, chi mi può aiutare? HTML e CSS 0
K Aiuto con file audio in html HTML e CSS 1
Antonio67 Lanciare file shell bash da html HTML e CSS 2
M Riportare in tabella HTML dati estratti con query SQL MySQL 0
G Codice html Javascript 1
M Collegamento tra form html e script php PHP 4
L Ricezione dei dati su file php da modulo html PHP 6
F Creare elementi html con javascript Javascript 4
G Appicazione HTML per inserimento dai in Database Access Microsoft HTML e CSS 0

Discussioni simili