[HTML] Inserire nuovo font con @font-face

[Shyson]

/* 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:

 

[Max 1]

Si va bene!
Occhio anche agli errori di ortografia

 

[Shyson]

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]

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

 

[Shyson]

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

@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');
}

 

[Shyson]

Quello di prima non era corretto, non trovava il font nella cartella personale, ma solo nel browser in caso ci fosse. Questo funziona:

@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;  
}