Inserire fonts sito web con css

[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

[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.

[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

[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.

[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

[CUB3]

Dato che Arial è presente in tutti i computer, è quindi più veloce da caricare di un GoogleApis?

Esatto!

E mettere un carattere mio del tipo 'open_sansregular' come primo carattere, dato che lo sto mettendo come .woff, non è altrettanto veloce?

Esatto!

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ì

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.

[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.