Inserire fonts sito web con css

"Null reference exception"? no, grazie, prendo un "unexpected T_VARIABLE"... Questo è il forum per imparare l'arte della programmazione o per chiedere un parere su una sessione di debug particolarmente ostica.
Regole del forum
Ricorda di indicare chiaramente nell'oggetto il linguaggio ([C#] oppure [PHP], [Java], [HTML], ...), se la discussione ne riguarda uno in particolare!
Rispondi
Avatar utente
Marta
Livello: Scheda perforata (1/15)
Livello: Scheda perforata (1/15)
Messaggi: 7
Iscritto il: sab gen 19, 2019 7:15 pm

Inserire fonts sito web con css

Messaggio da Marta »

Buonasera a tutti,
mi occorrerebbe un aiuto per sapere se ho capito bene il da farsi, studiando come funzionano i fonts con i css. I miei dubbi sono i seguenti.

Vorrei togliere i fonts.googleapis (che rallentano parecchio il sito) e mettere dei miei fonts nel mio sito web.
Il modo che ho capito di dover fare è il seguente:

Nel file sito.css come prima riga

body
{
font-family: 'Arial', 'Serif', 'open_sansregular';
font-size: 15px;
line-height: +1.9;
text-align: left;
margin-top: 0px;
user-select: none;
}

@font-face {
font-family: 'open_sansregular';
src: url('../fonts/opensans-variablefont_wdthwght-webfont.woff2') format('woff2'),
url('../fonts/opensans-variablefont_wdthwght-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}


Nella cartella fonts

opensans-variablefont_wdthwght-webfont.woff
opensans-variablefont_wdthwght-webfont.woff2

Il dubbi sono i seguenti:
  • E' corretto scrivere in quel modo?
  • Se metto semplicemente font-family: 'Arial', 'Serif' senza specificare i fonts woff e woff2, i browser trovano i caratteri Arial e Serif senza problemi oppure alcuni browser potrebbero non trovare quei fonts?
  • Il fatto di non avere inserito i woff e woff2 per i caratteri Arial (che non ho trovato) rallenterebbe il sito in quanto in browser li deve andare a cercare nel pc di chi sta leggendo il mio sito?
  • Per quanto riguarda poi il carattere open_sansregular, è sufficien[te indicare solo il .woff e -woff2?
Grazie e scusate la lunghezza.
Marta
System
System
Bot ufficiale TurboLab.it
Bot
Messaggi:
Iscritto il: sab dic 31, 2016 6:19 pm
Contatta: Contatta

Re: Inserire fonts sito web con css

Messaggio da System » ven gen 05, 2024 6:35 pm


Avatar utente
CUB3
Moderatore
Moderatore
Messaggi: 4252
Iscritto il: lun gen 26, 2015 10:13 am

Re: Inserire fonts sito web con css

Messaggio da CUB3 »

Mi sai che hai fatto un po' di confusione oppure sono io che non ho capito bene.font

Il sito più veloce da caricare è quello che non ha font specifici perché il browser fa il rendering con quelli che ha.

Se specifichi alcuni font di uso comune, il browser li prenderà nella maniera più veloce possibile sul sistema dove viene eseguito e il sito si caricherà grossomodo come nel primo caso.

Se inserisci dei font sul tuo sito, quei font andranno scaricati prima di essere mostrati dal browser (rallentando il caricamento della pagina).

Utilizzare i font.googleapis consente di avere font specifici da caricare dai velocissimi server di Google piuttosto che dal tuo server (ovunque esso sia) con il doppio vantaggio di diminuire il carico su quest'ultimo.
"Let me tell you a secret: when you hear that the machine is “smart”, what it actually means is that it’s exploitable." Mikko Hypponen
Avatar utente
Marta
Livello: Scheda perforata (1/15)
Livello: Scheda perforata (1/15)
Messaggi: 7
Iscritto il: sab gen 19, 2019 7:15 pm

Re: Inserire fonts sito web con css

Messaggio da Marta »

Ciao Cub3, grazie della risposta.

Se faccio un'analisi con PageSpeed Insights i fonts Googleapis sono segnalati come una risorsa esterna che impiega ben 148 ms a caricare il fonts che sono un'eternità, informaticamente parlando, per questa ragione vorrei togliere il link ai fonts Googleapis e mettere dei fonts miei.

Non mettere alcun fonts di riferimento non mi piace. Il sito deve avere una sua identità uguale per tutti.

Nella seconda tua ipotesi quindi, se comprendo bene, se metto come ho indicato, un fonts Arial, che tutti dovrebbero avere non ho bisogno di mettere i woff e woff2 perchè il browser li prenderà dal pc dell'utente essendo caratteri preinstallati sulla maggior parte (o in tutti?) dei sistemi. Dato che il carattere Arial ormai è universale, in qualunque lingua le pagine saranno viste con il carattere Arial. Giusto? Vale quindi scrivere

body
{
font-family: 'Arial', 'Serif', 'open_sansregular';
font-size: 15px;
line-height: +1.9;
text-align: left;
margin-top: 0px;
user-select: none;
}

P.S. open_sansregular è solo una "licenza poetica" mi piace molto come carattere ma appunto devo pensare alla velocità del sito e per questo l'ho messo come terza possibilità... Sbaglio?

E' difficile per me comprendere il significato profondo dei file woff. Leggo che sono dei files compressi di caratteri, se ho capito bene. Leggo che sono molto veloci... ma allora il prelevare il carattere Arial dal PC della persona che legge è comunque molto più veloce che aprire un carattere woff che dovrebbe essere scaricato dal mio server?

Marta
Avatar utente
CUB3
Moderatore
Moderatore
Messaggi: 4252
Iscritto il: lun gen 26, 2015 10:13 am

Re: Inserire fonts sito web con css

Messaggio da CUB3 »

Non so che ha che velocità sei abituato ma caricare un font in 0,15 secondi non mi sembra affatto un eternità!

Una risorsa presente sul computer è di accesso più immediato a qualuque altra risorsa che viene servita, veloce come ti pare, attraverso internet!

Sarebbe meglio che invece si specificare una font in particolare, tu indicassi solo la famiglia del font nel css.

Oltre ad utilizzare lo strumento messo a disposizione da Google, utilizza anche lo strumento di svilupp proprio dei browser per verificare i tempi di caricamento del tuo sito.
"Let me tell you a secret: when you hear that the machine is “smart”, what it actually means is that it’s exploitable." Mikko Hypponen
Avatar utente
Marta
Livello: Scheda perforata (1/15)
Livello: Scheda perforata (1/15)
Messaggi: 7
Iscritto il: sab gen 19, 2019 7:15 pm

Re: Inserire fonts sito web con css

Messaggio da Marta »

Ciao Cub3,
grazie della risposta. Scusa la richiesta di chiarimenti, forse banali, ma chiariscimi alcuni aspetti.

Quando scrivi: "Una risorsa presente sul computer è di accesso più immediato a qualunque altra risorsa che viene servita, veloce come ti pare, attraverso internet!" mi stai dicendo che se io metto:

body
{
font-family: 'Arial', 'open_sansregular', Serif;
}

Dato che Arial è presente in tutti i computer, è quindi più veloce da caricare di un GoogleApis?
E mettere un carattere mio del tipo 'open_sansregular' come primo carattere, dato che lo sto mettendo come .woff, non è altrettanto veloce?

Cosa intendi poi per: Oltre ad utilizzare lo strumento messo a disposizione da Google, utilizza anche lo strumento di sviluppo proprio dei browser per verificare i tempi di caricamento del tuo sito . Non comprendo a cosa ti stai riferendo. Qual'è questo strumento?

Marta
Avatar utente
CUB3
Moderatore
Moderatore
Messaggi: 4252
Iscritto il: lun gen 26, 2015 10:13 am

Re: Inserire fonts sito web con css

Messaggio da CUB3 »

Marta ha scritto: dom gen 07, 2024 10:08 am Dato che Arial è presente in tutti i computer, è quindi più veloce da caricare di un GoogleApis?
Esatto!
Marta ha scritto:E mettere un carattere mio del tipo 'open_sansregular' come primo carattere, dato che lo sto mettendo come .woff, non è altrettanto veloce?
Esatto!
Marta ha scritto:Cosa intendi poi per: Oltre ad utilizzare lo strumento messo a disposizione da Google, utilizza anche lo strumento di sviluppo proprio dei browser per verificare i tempi di caricamento del tuo sito . Non comprendo a cosa ti stai riferendo. Qual'è questo strumento?
Qausi tutti i browser hanno uno strumento raggiungibile premendo F12, ad esempio, su Firefox appare così
Immagine
Puoi vedere come selezionando la tab Rete è possibile, ricaricando la pagina con la cache disattiva, controllare i tempi di caricamento dei singoli componenti della pagina.
Ovviamente dovrai asicurarti di caricare il sito attraverso internet e non direttamente dal tuo computer, per avere un responso corretto.
"Let me tell you a secret: when you hear that the machine is “smart”, what it actually means is that it’s exploitable." Mikko Hypponen
Avatar utente
Marta
Livello: Scheda perforata (1/15)
Livello: Scheda perforata (1/15)
Messaggi: 7
Iscritto il: sab gen 19, 2019 7:15 pm

Re: Inserire fonts sito web con css

Messaggio da Marta »

Buongiorno Cub3 e grazie dei chiarimenti.
Ho capito i diversi aspetti di questo problema e certamente userò dei fonts di sistema, anche se serve a recuperare pochi millesecondi... non si butta mai nulla.
Grazie ancora delle spiegazioni.
Ora mi metto al lavoro.
A presto e passa una bella giornata.
Avatar utente
DianaTerry
Livello: Scheda perforata (1/15)
Livello: Scheda perforata (1/15)
Messaggi: 4
Iscritto il: lun ago 23, 2021 3:58 pm

Re: Inserire fonts sito web con css

Messaggio da DianaTerry »

Marta ha scritto: lun gen 08, 2024 9:00 am Buongiorno Cub3 e grazie dei chiarimenti.
Ho capito i diversi aspetti di questo problema e certamente userò dei fonts di sistema, anche se serve a recuperare pochi millesecondi... non si butta mai nulla.
Grazie ancora delle spiegazioni.
Ora mi metto al lavoro.
A presto e passa una bella giornata.
https://tesiaccademica.it/
Ciao! Ottima domanda, e sì, i font di sistema sono ancora una buona strategia per ottimizzare i tempi di caricamento, soprattutto quando si cerca di ridurre ogni possibile ritardo. Anche se parliamo di pochi millisecondi, in un contesto dove ogni dettaglio conta per l'esperienza utente e il posizionamento SEO, ogni miglioramento può fare la differenza. Inoltre, l’uso dei font di sistema garantisce che la resa del testo sia coerente su tutti i dispositivi, senza necessità di caricamenti aggiuntivi. Io li uso spesso e mi hanno permesso di migliorare i tempi di caricamento in maniera tangibile.
System
System
Bot ufficiale TurboLab.it
Bot
Messaggi:
Iscritto il: sab dic 31, 2016 6:19 pm
Contatta: Contatta

Re: Re: Inserire fonts sito web con css

Messaggio da System » mar set 10, 2024 3:07 pm


Rispondi
  • Argomenti simili
    Risposte
    Visite
    Ultimo messaggio