Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 18
  1. #1
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    648

    custom font non carica sempre

    Invece di usare Google font sto utilizzando il metodo @font-face per un paio di font ma uno dei due spesso non carica, e la cosa è davvero fastidiosa. La cosa strana poi è che quello caricato non l'ho chiamato col font-face ma con il selector universale *, ovvero senza nessuna chiamata all'URL locale.
    Quale potrebbe essere la ragione di tutto ciò?

  2. #2
    Ciao, se il font deve essere importato da un file, devi usare il @font-face.

    Il selector universale * non serve per importare i fonts, bensì per selezionare tutti gli elementi di una pagina e applicarne gli stili definiti.

  3. #3
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    648
    Davide, è quello che faccio, utilizzo @font-face perché ho messo il font sul mio server, ma il font spesso non carica.
    Altra cosa strana è che devo per forza chiamare lo stylesheet con @import url, altrimenti non funziona. Ma quello sta già nella cartella del font che è chiamato con @font-face. Dunque perchè devo chiamarlo di nuovo?
    Il dubbio sul selector universale è: se il font è anch'esso sul mio server, ma non lo chiamo con @font-face, come fa ad assegnarlo al selector?

  4. #4
    Moderatore di PHP L'avatar di Alhazred
    Registrato dal
    Oct 2003
    Messaggi
    11,969
    Dovresti far vedere un po' di codice che usi oltre che a spiegarlo, se ci sono errori non si vedono così.

  5. #5
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    648
    beh, l'ho sottinteso perchè è il codice standard (i path omessi sono assoluti):

    codice HTML:
    @import url('/fonts/highway/stylesheet.css');
    @import url('/fonts/icao/stylesheet.css');
    @font-face {font-family:HighwayGothic;src:url(/fonts/highway/HighwayGothic.woff2) format('woff2'), url(/fonts/highway/HighwayGothic.woff) format('woff');}  
    @font-face {font-family:Icao_new;src:url(/fonts/icao/Icao_new.woff2) format('woff2'), url(/fonts/icao/Icao_new.woff) format('woff');} 
    * {font-family:'Ruda',Arial,sans-serif;}

    1) non capisco perchè la chiamata allo stylesheet sia necessaria, visto che è già nel folder del font
    2) non capisco perchè uno dei font non carica sempre (non è un problema di cache)

  6. #6
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    648
    UPDATE: hoi tolto i due import
    codice HTML:
    @import url('/fonts/highway/stylesheet.css');
    @import url('/fonts/icao/stylesheet.css');
    e i due font in questione ora caricano sempre.
    Però ho un problema sul terzo font * {font-family:'Ruda',Arial,sans-serif;}, in quanto non mostra un font-weight:900, pur essendo presente nella sua cartella e nella specifica CSS.
    Qualche idea?

  7. #7
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    112
    Ciao, in riferimento ai codici generati da google font:

    css :
    codice:
    @import url('https://fonts.googleapis.com/css2?family=Ruda:wght@900&display=swap');
        .font-ruda {
            font-family: 'Ruda', sans-serif;
            font-size: 2em;
        }
    html :
    codice HTML:
    <p class="font-ruda">titolo</p>

  8. #8
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    648
    ciao Ninja, sto utilizzando in font sul server, non google font. Per questo trovo ancora più strano che il weight non sia caricato pur essendo presente

  9. #9
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    112
    Si è vero, da "google.font" e altri, si possono anche scaricare, ovviamente ti farà scaricare un file .zip con i vari font-weight, nel tuo caso devi modificare il css in questo modo(il font Ruda-Black.ftt fa riferimento al font-weight:900):

    Se devi utilizzare anche altre taglie allora è meglio che il font-familly sia in riferimento alla taglia, tipo : Ruda400 oppure Ruda900 ecc, associa la taglia al nome assegnato al font-family.

    codice:
      @font-face {
                font-family: Ruda900;
                src: url('fonts/Ruda-Black.ttf');
            }
    .font-ruda900 {         font-family: 'Ruda900', sans-serif;
            font-size: 2em;
        }
    codice HTML:
    <p class="font-ruda900">titolo</p>

  10. #10
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    648
    ...tutti i passaggi che indichi li ho evitati perchè ho seguito la procedura di convertire in woff utilizzando Transfonter, quindi ho i file ben preparati. Infatti il demo.html conferma tutti gli weight (non posso mostrartelo perchè il sito è under maintenance). Per questo è sufficiente che indico font-weight:900. Ma il maledetto non lo prende
    Ultima modifica di stardom; 24-06-2020 a 17:04

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.