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".
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/