Fonts sito web

[MarcelloSerra]

Buonasera a tutti,
mi occorrerebbe una conferma o meno se posso operare nel seguente modo.
Il quesito è questo: voglio togliere i fonts.googleapis e mettere dei miei fonts nel mio sito web.
Il modo che ho capito di dover fare è il seguente:

Nella cartella css (come prime righe)

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 mio dubbio è il seguente: 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?

Per quanto riguarda poi il carattere open_sansregular, è sufficiente indicare solo il .woff e -woff2?
Grazie.
Marcello

[filippo.toso]

Non è un problema di PHP ma di HTML/CSS.

[MarcelloSerra]

Ciao Filippo,
nel senso che devo postare la domanda nella sezione CSS?
Ciao.
Marcello

[KillerWorm]

Ciao e benvenuto.

nel senso che devo postare la domanda nella sezione CSS?

Lo staff ha già provveduto a spostare la tua discussione nella sezione corretta. In futuro fai giusto attenzione ad individuare la sezione più appropriata in cui aprire ogni singola tua discussione. Inoltre è bene usare i tag [CODE][/CODE] per postare opportunamente il codice nel forum (vedi regolamento di sezione); per il momento ho provveduto io, fai attenzione in futuro, grazie

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

Qualche nozione di base è necessaria per capire meglio come funziona e come puoi eventualmente intervenire.

La proprietà font-family indica una lista di uno o più nomi (relativi a famiglie specifiche di font o a delle famiglie generiche) che vengono considerati in ordine prioritario da sinistra a destra.
Vale a dire che il primo nome viene considerato se tale font esiste (è installato, incluso, supportato...), altrimenti viene preso il secondo se esiste, altrimenti il terzo e così via.
Se nessuno dei nomi indicati è supportato, verrà comunque considerato un font di default.

Il mio dubbio è il seguente: 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?

Andiamo in ordine:

Arial è uno di quei font definiti come Web Safe Fonts, cioè supportati dalla stragrande maggioranza dei browser/sistemi operativi. Presupponendo che sia già disponibile sul sistema di ciascun utente, non c'è nessun bisogno di includerlo con qualsivoglia altro formato.

Inoltre, in questo caso ti direi che è pressoché impossibile che siano considerati gli altri font a seguire se indichi questo come primo della lista. Sarà infatti considerato questo come prima scelta e a questo punto è quasi inutile che tu vada anche ad includere il tuo "open_sansregular".
Nel caso che hai riportato, a meno che non ci siano altre regole che sovrascrivono questa proprietà, sarà presumibilmente considerato sempre e solo Arial.

Il secondo nome indicato è 'Serif' (che hai scritto tra apici). Qui però c'è qualche cosa di ambiguo, che non mi torna.
Il nome serif (quando indicato senza apici) è infatti una keyword che specifica una famiglia generica di font (vedi documentazione), ma il fatto che tu lo abbia indicato tra apici induce il sistema a considerarlo come un nome specifico, per cui il sistema va a cercare proprio il font (o meglio, la famiglia) con quel nome.
Ora "Serif" (come nome di famiglia di font) non è certamente un Web Safe Fonts, per cui, a meno che non sia incluso in qualche modo, questo verrà teoricamente scartato a prescindere.

In secondo luogo, Arial è un font sans-serif (cioè senza grazie), quindi trovo controverso il fatto che tu abbia specificato un cosidetto "Serif" (che presumibilmente è un font con grazie) nel caso in cui Arial non sia considerato.

Comunemente si specifica una famiglia generica come ultimo nome della lista (vedi guida), in modo che il sistema consideri comunque un font "similare" a quelli specificati, quando questi non vengono trovati.
Nel tuo caso è forse più sensato avere una cosa del genere:

font-family: 'open_sansregular', 'Arial', sans-serif;

Per quanto riguarda poi il carattere open_sansregular, è sufficiente indicare solo il .woff e -woff2?

Ti direi di sì. Questi due formati sono attualmente ben supportati da tutti i moderni browser e sono chiaramente più performanti rispetto agli svariati predecessori.
A meno che non ci sia qualche particolare ragione, ad es. sia necessario il supporto su browser "preistorici", è più che sufficiente l'inclusione di questi due soli formati.

[MarcelloSerra]

Ciao KillerWorm e grazie delle spiegazioni che mi hanno chiarito molti dubbi.


Innanzitutto ti spiego il motivo della scelta dei caratteri... Il mio carattere preferito è Georgia, un Serif, ma ho letto che quello di fatto meglio considerato, più usato è appunto Arial (che è un carattere che assolutamente non mi piace) per cui ho pensato: "mi tappo il naso" e opto per Arial per migliorare le prestazioni e la performance del sito. Tra l'altro ho visto che la maggior parte dei siti usa Arial, per questa ragione pensavo di optare per questa soluzione. Da qui la contradditorietà nella scelta del carattere: non potrei mai vedere un Verdana o un Helvetica... già sopportare Arial...


Tu cosa ne pensi della differenza nell'uso di Arial piuttosto che Georgia (pur essendo anche lui un Web Safe Fonts)? Il mio ragionamento è corretto?


Non sapevo la questione degli apici nei font-family, grazie del chiarimento.


Ora, dato che il mio scopo è velocizzare e rendere il sito più performante, forse un open_sansregular, che dovrebbe caricare i files .woff farebbe perdere un po' di velocità. Ho letto che questi sono files compressi di caratteri e leggo che sono veloci... ma allora il prelevare il carattere Arial dal PC della persona che legge è comunque molto più veloce che aprire un carattere woff?


Grazie.
Marcello

[KillerWorm]

ma ho letto che quello di fatto meglio considerato, più usato è appunto Arial

Parliamo di valori percentuali, lasciami dire, ampiamente discutibili per ciò che riguarda le statistiche di utilizzo. Non vedo particolari ragioni nel preoccuparsi di scegliere uno piuttosto che l'altro per questo motivo.

Tu cosa ne pensi della differenza nell'uso di Arial piuttosto che Georgia

Uno è sans-serif l'altro è serif. La scelta andrebbe fatta in base ad uno studio attento del design e della eventuale grafica coordinata, all'adeguatezza rispetto al contesto, a fattori come leggibilità e accessibilità, nonché al gusto personale.

Il fatto che Arial sia quello meglio considerato e più usato, da ciò che hai letto, è tutto da valutare.
Nessuno ti impedisce di specificare per primo "Georgia" se è quello che preferisci e se non ci sono particolari motivazioni per cui evitarlo.
A quel punto potresti inserire gli altri come ripiego (fallback).
In qualunque caso suppongo che ci siano anche delle ragioni di design se hai optato per un carattere serif; vedrei quindi più logico applicare sempre dei caratteri di quel tipo come fallback, non di certo un Arial che è appunto sans-serif.

Ora, dato che il mio scopo è velocizzare e rendere il sito più performante
...
ma allora il prelevare il carattere Arial dal PC della persona che legge è comunque molto più veloce che aprire un carattere woff?

Come principio, perché un qualsiasi software possa accedere ad una qualsivoglia risorsa è necessario che questa sia "presente" nel sistema locale. In altre parole, per poter accedere a qualsiasi cosa sul web, è sempre necessario che questa sia prima "scaricata" nel proprio sistema.

Ora, per logica, direi che è certamente più veloce accedere ad un font già presente nel sistema, piuttosto che allo stesso online, il quale andrebbe comunque scaricato nel sistema locale.

Lasciami dire però, in genere questa preoccupazione avrebbe senso per altri tipi di risorse multimediali (ad esempio immagini, audio, video) per le quali il peso dei file potrebbe certamente incidere in modo ben più sensibile sulla velocità di transizione dei relativi dati, rispetto al peso di file font. Potrei pensare che tu ti sia già preoccupato di questo.

Certo, per quanto possibile è sempre bene ridurre il carico di dati anche quando si tratta di qualche manciata di byte, ma il tutto andrebbe comunque ponderato rispetto allo specifico contesto di applicazione e alle reali esigenze.

In conclusione, caricare i font sul proprio server anziché fruirli attraverso servizi web, va bene, a patto che se ne abbia un reale miglioramento delle performances. Va bene anche usare dei font di sistema, come ripiego o anche come priorità, a patto che questo si sposi bene col resto del design.

Se poi l'intento è quello di velocizzare il proprio sito, sicuramente vanno valutati diversi altri punti prima di questo. L'ottimizzazione dei file multimediali è uno tra questi ma potrebbe essere utile seguire magari qualche guidai. Suppongo tu abbia già fatto delle ricerche del tipo "come velocizzare il proprio sito".

Per ora è tutto.
Buona continuazione

[MarcelloSerra]

Buongiorno KillerWorm e grazie tantissime delle spiegazioni.

Le tue considerazioni sono logiche e di ampio respiro.

In effetti il discorso dei fonts si applica a un discorso di pi� ampio respiro che sto cercando di fare su tutto il sito: migliorare la sua velocit� e le sue prestazioni, tra queste anche un'ottimizzazione di alcuni aspetti del software (anche se � da tempo che sto cercando un informatico che sappia lavorare sul php senza csm, ma a quanto pare, al giorno d'oggi, � fantascienza) che io non riesco a gestire.

I fonts sono uno dei diversi aspetti che devo migliorare delle prestazioni del sito... sai come si dice: "Se la tua casa � sporca va bene iniziare da qualunque angolino, basta iniziare".

Gi� aver ben compreso che mettere dei fonts di sistema � preferibile ai fonts online (anche se mi fa recuperare solo qualche millisecondo) � un buon angolino dal quale iniziare.

Il mio sito � un sito di lettura, quindi � la facilit� di lettura dell'utente che devo privilegiare e il piacere di stare su quella pagina per qualche minuto. Studier� ancora le due possibilit� Arial o Georgia da questo punto di vista e come mi suggerisci anche in base al design del sito.

Ti ringrazio ancora tanto dei chiarimenti.

Passa una bella giornata.