11

 Só é possível visualizar uma fonte em um site, se aquela fonte estiver instalada ou veio no sistema operacional ou browser do computador.

Estive pesquisando e encontrei alguns variados tipos de fontes que podem ser usadas em CSS.

  • Com tantos tipos de famílias de fontes como: serif, monospace e outras, qual a melhor forma de usa-las?

  • Como usar uma fonte externa, mas com garantia que o usuário a tenha em seu computador?

3 Respostas 3

11

Decidi me aprofundar e cheguei a essa resposta:

Para definir que tipo de fonte usar em qualquer trecho de código HTML, através do CSS, devemos usar a propriedade font-family com o nome da fonte que deseja. Assim, a sintaxe para se definir e usar uma fonte em CSS é:

font-family: "Nome da Fonte";

Pode-se construir todo o design de seu site baseado em uma fonte, e o seu leitor simplesmente não vai ver a fonte porque ela não está instalada ou não veio no sistema operacional do seu computador.

E agora, o que pode ser feito para isso não ocorrer?

Uma das soluções para esse problema é dar uma lista de fontes como valor, para atributo o "font-family", separadas por vírgula. Existem dois tipos de nomes de família de fontes:

Family-name - O nome de uma fonte-família, como "times", "courier", "arial", etc.

Generic-family - O nome de uma família genérica, como "serif", "sans-serif", "cursive", "fantasia", "monospace".

  • Sintaxe de Family-name:

    font-family: "Colibri", "Comic Sans";

O CSS vai tentar estilizar com a primeira fonte declarada, se ela existir no computador do leitor, ela 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.

  • Sintaxe de generic-family:

    font-family: "arial", "verdana", "sans-serif";

Comece com a fonte desejada e termine sempre com uma família genérica, para permitir que o navegador escolha uma fonte semelhante na família genérica, se nenhuma outra fonte estiver disponível.

Uma outra solução e muito usada é o: @font-face, você deve primeiro definir um nome para a fonte (por exemplo, minhafonte) e, em seguida, aponte para o arquivo de fonte.Veja:

@font-face {
    font-family:'minhafonte';
    src:url("../fonts/bubblegum-sans-regular.otf");
}
div {
    font-family:minhafonte;
} 

E por fim podemos usar uma das formas mais simples e garantidas que são as fontes do Google Web Fonts, pois são fontes próprias para web e todas testadas e aprovadas pela plataforma google.

Para isso você deve especificar o caminho da fonte fornecido no google fonts, logo após a fonte está instalada e pronto para usar, temos que utilizar o nome específico que o site fornece para funcionar corretamente. Veja um exemplo:

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

Ultilizando a fonte na tag desejada:

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

Além da segurança de usar fontes do Google Web Fonts, temos também a facilidade, sem precisar fazer download de nada, apenas copiando o caminho da fonte desejada que já está hospedada nos servidores do google e especificando o seu nome no seu arquivo CSS.

Referencias:

https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

https://www.w3schools.com/cssref/pr_font_font-family.asp

http://www.criarsites.me/como-utilizar-fontes-google-web-fonts/

https://tonyblack10.gitbooks.io/css/content/fonts/index.html

http://www.htmlprogressivo.net/2014/02/

2
  • 1
    Esta resposta também tem conteúdo integral de sites como este ou este sem que seja indicado a proveniência. Corrige isso por favor.
    – Sergio
    Commented 28/04/2017 às 6:45
  • 1
    @Sergio Corrigido. Eu não sabia mto bem que funcionava assim, mas a partir de agora ficarei mais atenta quanto a isso. Fico grata, levo isso como dicas para melhorar futuras respostas. Commented 28/04/2017 às 14:00
4

Com tantos tipos de fontes como: serif, monospace e outras, que tipo devo usar

O tipo da fonte é baseado em opinião ao usar serif, monospace ou outras.

Como usar uma fonte original, diferente, mas garantir que o usuário a tenha em seu computador

No CSS3 é possível configurar alguma fonte usando @font-face, e enviar junto na requisição, pois a página vai buscar a fonte no próprio projeto, dessa forma podendo usar qualquer uma.

Veja esse exemplo:

@font-face {
    font-family: minhaFonte;
    # A URL pode ser local também
    src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf"); 
}

body { font-family: "minhaFonte" }

Existem vários formatos para fontes, como o ttf ou woff, que podem ser baixadas e colocadas no projeto.

2
  • 1
    Editei minha pergunta pq achei que não estava transmitindo bem o que eu queria, dê uma Olhada. Aproveitei e pesquisei mais sobre a minha dúvida e formulei minha própria resposta. Commented 25/03/2017 às 2:10
  • 2
    upvoted @AlíciaTairini =]
    – BrTkCa
    Commented 25/03/2017 às 13:09
3

Uma forma que não foi cita é indexando a fonte direto no <head> do documento como uma stylesheet. O https://fonts.google.com tem uma variedade de font-family que pode ser usadas dessa forma por exemplo:

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC" rel="stylesheet">

inserir a descrição da imagem aqui

Essa forma é interessante porque caso em algum momento o usuário já tenha tido acesso ao ao link dessa fonte, mesmo em outro site, essa fonte vai ficar no Cache do Navegador, e não vai precisar ser "baixada" novamente.

Execute para ver funcionando aqui mesmo!

h1 {
    font-family: 'Noto Serif SC', serif;
}
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />

<h1>Minha fonte Custom</h1>

É interessante que esse link venha antes do link do seu .css para garantir que vai carregar de forma correta

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />

E no seu .css basta vc usar o font-family onde quiser, dessa forma por exemplo:

h1 {
    font-family: 'Noto Serif SC', serif;
}

OBS: O inconveniente dessa técnica é que se o servidor do Google estiver lento e o usuário ainda não tiver a fonte em cache ele pode ter um Flash of Unstyled Text (FOUT) ou Flash of Invisible Text (FOIT) que é quando a fonte aparece transparente antes de carregar completamente, ou aparece uma fonte default do sistema e só depois que carregar a fonte externa o texto muda pra font-family correta. E se o server do Google cair ai vai carregar uma fonte fallback do sistema operacional do usuário mesmo.

2
  • Obrigada pela resposta. +1 Commented 2/04/2019 às 0:27
  • 1
    @AliciaTairini eu que fico feliz em ter colaborado! 😉💪
    – hugocsl
    Commented 2/04/2019 às 0:45

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 .