[HTML] Inserire nuovo font con @font-face

Discussione in 'HTML e CSS' iniziata da Shyson, 8 Gennaio 2019.

  1. Shyson

    Shyson Utente Attivo

    Registrato:
    19 Agosto 2012
    Messaggi:
    1.103
    Mi Piace Ricevuti:
    1
    Punteggio:
    38
    Sesso:
    Maschio
    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: 8 Gennaio 2019
  2. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.542
    Mi Piace Ricevuti:
    265
    Punteggio:
    83
    Sesso:
    Maschio
    Si va bene!
    Occhio anche agli errori di ortografia
     
  3. Shyson

    Shyson Utente Attivo

    Registrato:
    19 Agosto 2012
    Messaggi:
    1.103
    Mi Piace Ricevuti:
    1
    Punteggio:
    38
    Sesso:
    Maschio
    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.
     
  4. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.542
    Mi Piace Ricevuti:
    265
    Punteggio:
    83
    Sesso:
    Maschio
    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: 9 Gennaio 2019
  5. Shyson

    Shyson Utente Attivo

    Registrato:
    19 Agosto 2012
    Messaggi:
    1.103
    Mi Piace Ricevuti:
    1
    Punteggio:
    38
    Sesso:
    Maschio
    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: 9 Gennaio 2019
  6. Shyson

    Shyson Utente Attivo

    Registrato:
    19 Agosto 2012
    Messaggi:
    1.103
    Mi Piace Ricevuti:
    1
    Punteggio:
    38
    Sesso:
    Maschio
    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;  
    }
    
    
    
     
Sto caricando...

Condividi questa Pagina