Por que meu navegador não está exibindo as fontes no meu código CSS?

Se as fontes que você especificar no CSS não estiverem instaladas no seu computador/dispositivo (ou em qualquer outro visitante), seu CSS também precisa especificar onde o navegador pode baixar essas fontes personalizadas quando ele carregar sua página. Isso pode ser feito com um elemento LINK na sua página HEAD ou com uma regra @import no seu CSS.

Uma vantagem de usar um repositório de fontes popular como o Google Fonts é que eles fornecem código "embed" pronto para isso, que você pode simplesmente copiar e colar na sua página ou arquivo CSS, por exemplo, para a fonte Noto Sans no Google Fonts, elas fornecem estas opções de código para um 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.