Perché il mio browser non visualizza i font nel mio codice CSS?

Se i font che specifichi nei CSS non sono installati sul tuo computer/dispositivo (o su quello di qualsiasi altro visitatore), il tuo CSS deve anche specificare dove il browser può scaricare quei font personalizzati quando carica la tua pagina. Questo può essere fatto con un elemento LINK nell'HEAD della tua pagina o con una regola @import nel tuo CSS.

Un vantaggio di usare un popolare repository di font come Google Fonts è che forniscono un codice "embed" pronto per questo, che puoi semplicemente copiare e incollare nella tua pagina o nel tuo file CSS-es, per il font Noto Sans su Google Fonts, forniscono queste opzioni di codice per un elemento LINK:

…or for a CSS @import rule:

2. @import url('https ://fonts. googleapis .com/css2?family=Noto+Sans&display=swap'); 
3.  

(Note I had to break those example URLs to avoid formatting issues here on Quora.)

This is also why it’s a good idea to declare font-family rules in CSS with a list of fonts in order of preference, ending in common OS-default fonts and then finally a generic font category, just in case your specified custom font cannot be loaded for any reason. Also take care that any font names with spaces are enclosed in quotes in your CSS font-family rules, like so:

2. .example { 
3. font-family: 'noto sans', helvetica, arial, sans-serif; 
4. } 
5.