2

Quando o usuário não tem a fonte determinada no arquivo css instalada em seu computador, o browser irá utilizar a fonte do estilo padrão, segundo as apostilas que li.

Por exemplo, você cria um layout voltado para o público jovem, mas por ser uma fonte pouco conhecida, o site acabar em Times New Roman para a maioria dos usuários.

  • Existe algum site, portal ou biblioteca que é utilizada para se precaver desse risco?
2
  • 1
    Não é muito minha área, mas no caso você colocaria mais de uma fonte como salvaguarda. 30/03/2019 às 11:48
  • Vc está usando algum CDN de fonte como o Google Fonte? Ou está usando algum @font-face com a fonte customizada? Vc precisa dar mais detalhes, e se possível incluir seu CSS
    – hugocsl
    30/03/2019 às 17:34

2 Respostas 2

3

Via CSS você pode fazer uma lista de fontes a serem consideradas para tal elemento. Caso o navegador não encontre a primeira, ele busca a segunda. Se não encontrar a segunda, ele busca a terceira. E por aí vai...

Exemplo:

p {
  font-family: 'Essa nao existe', 'Tahoma', 'Arial', serif, sans-serif;
}
<p>Lorem ipsum</p>

No final das contas, o ideal é você disponibilizar as suas fontes no seu site e adicioná-as no seu arquivo .css. Para tal, tem uma resposta minha que explica e já resolve os problemas de compatibilidade das fontes em determinados navegadores: Problemas com o font-face. Recomendo veementemente a leitura caso adote esta alternativa.


A propriedade font-family do CSS permite que se faça uma lista de prioridades de familias de fontes e/ou nomes genéricos de famílias a serem especificados para um elemento selecionado. Ao contrário da maioria das demais propriedades CSS, os valores são separados por vírgula para indicar quais são as alternativas. O Browser irá utilizar a primeira fonte da lista que for encontrada no computador, ou poderá fazer o dowload utilizando a informação contida na regra @font-face.

Programadores WEB devem sempre adicionar pelo menos uma família genérica para a lista de font-family, já que não há garantia que aquela fonte específica está instalada no computador, ou possa ser baixada pela regra @font-face. A família genérica permite o browser selecionar uma fonte aceita pelo computador, quando necessário.

É também conveniente usar de antemão a propriedade font para definir a font-size e outras propriedades relacionadas a fonte todas de uma só vez.

Fonte/leitura recomendada: MDN font-family CSS


"- Existe algum site, portal ou biblioteca que é utilizada para se precaver desse risco"

Não exatamente para "precaver desse risco", mas uma excelente biblioteca de fontes existe sim: o Google Fonts. Hoje conta com 915 fontes e você pode "linkar" direto no seu projeto. Aliás, tem uma pergunta aqui sobre Como usar as fontes do Google. Dê uma olhadinha lá! Já a precaução fica por sua conta, aplicando uma lista de fontes adequada!

0

Existe algum site, portal ou biblioteca que é utilizada para se precaver desse risco?

Existe a propriedade font-family do CSS, você pode listar uma série de fonts para seu documento, elas serão usadas na ordem que você definiu. Vejamos na prática, imagine que você definiu as seguintes fontes:

font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

O CSS vai tentar estilizar com a primeira fonte declarada, se ela existir no computador do leitor, nesse caso a fonte "Palatino Linotype" será exibida,e se caso ela não estiver presente, o estilo CSS tentará ser feito com a segunda fonte. E por fim, se não tiver nenhuma das fonte no computador do usuário, o browser mostrará uma fonte padrão do sistema. Recomenda - se que a última fonte da lista seja uma fonte genérica: serif, sans-serif, monospace, cursive ou fantasy. Isso permiti que o navegador escolha uma fonte semelhante na família genérica, se nenhuma outra fonte estiver disponível.

Existe tambem a biblioteca Google Web Fonts, que contem fontes próprias para web e todas testadas e aprovadas pela plataforma google.

Usando o @import:

@import url('https://fonts.googleapis.com/css?family=Titillium+Web');

Ultilizando a fonte na tag desejada:

h1 {
    font-family: 'Titillium Web', sans-serif;
}

Lembre-se: O @import é um elemento CSS, então caso seja colocado no <head> do HTML, ele sempre devera ficar dentro de uma tag <style> .

Usando a tag <link>:

A tag <link>, diferente do @import vai direto no <head> do HTML. Veja o exemplo com a mesma fonte usada no exemplo acima.

<head>
    <title>Google Fonts</title>
    <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
</head>

Lembrando que o WebFonts já fornece o código pronto para inserção no seu CSS ou HTML.

Referencias:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .