Como alterar o font family do site

Normalmente quando criamos uma página, por mais bonita que nossa página fique, algo precisa ser alterado. Saber alterar o font family do seu site é algo extremamente importante para todos os desenvolvedores front end. E é isso que iremos abordar nesse artigo.

Formas de se alterar o font family

Antes de aprender a como importar, ou seja, como podemos trazer uma família de fonte que não existe por padrão nos navegadores, devemos saber como alterar o font family dos elementos HTML.

Você pode fazer uma declaração genérica, alterando todos os elementos da sua página, ou, até mesmo, pode definir apenas um elemento com fonte diferente. Para alterar a fonte apenas de um elemento, basta usar qualquer tipo de seletor CSS para aplicar a estilização.

Curso HTML5 + CSS3 - Propriedades e seletores avançados

Conhecer o curso

.meu-elemento {
	font-family: "Helvetica", Arial, sans-serif;
}

Dessa forma, apenas os elementos HTML que possuem essa classe receberão essa alteração de fonte. Caso, queira deixar todos os elementos do seu site com a fonte personalizada, você deve usar um seletor que aplique o estilo em todos os elementos, dessa forma:

* {
	font-family: Arial, sans-serif;
}

Vimos como podemos alterar o font family de um elemento individualmente e como aplicamos a alteração para todos os elementos, mas vamos entender melhor as duas declarações.

Quando você usa a propriedade font-family, o primeiro valor é o tipo de fonte que você quer aplicar, por exemplo, a fonte Arial, ou Helvetica. O segundo valor que passamos é uma opção caso o navegador não encontre a primeira opção. Já a última declaração você dá ao navegador a liberdade de adicionar qualquer fonte sans-serif caso ele não tenha nenhuma opção anterior, garantindo assim que tenha uma fonte pelo menos similar ao que você precisa.

Curso HTML5 + CSS3 - Box model e Posicionamento de Elementos

Conhecer o curso

Adicionando fonte externa

Além do padrão que já vimos e que conhecemos, podemos alterar o font family com fontes externas, ou seja, algo mais personalizado. Existem algumas formas de fazer isso com CSS, vamos ver as duas forma mais usadas para essa personalização.

Alterando font family com font-face

Uma das formas de se trazer uma fonte específica é utilizando a propriedade font-face. Nesse caso é necessário fazer o donwload da fonte, adicionar a mesma junto dos arquivos.

Quando fazemos download de uma fonte específica, podemos encontrar vários formatos. Os formatos aceitos pelo CSS são:

• WOFF (Web Open Font Format): Este é o formato de fonte da web mais amplamente suportado e recomendado. Ele oferece uma boa compressão e qualidade. Use arquivos com extensão .woff ou .woff2;

• WOFF2 (Web Open Font Format 2.0): Uma versão mais recente e eficiente do WOFF, que oferece melhor compactação e desempenho. Use arquivos com extensão .woff2;

• TTF (TrueType Font): Um formato comum usado para fontes. Embora seja menos otimizado para a web em comparação com WOFF, ainda é suportado em muitos navegadores;

• OTF (OpenType Font): Outro formato comum de fonte, semelhante ao TTF. Ele também é aceito por vários navegadores;

• SVG (Scalable Vector Graphics): Um formato vetorial que pode ser usado para fontes. Geralmente, é menos usado hoje em dia, mas ainda é compatível com alguns navegadores mais antigos.

Para adicionar de fato, o arquivo ao projeto, no CSS passamos o local do arquivo e na propriedade font-family informamos o nome da fonte, dessa forma:

@font-face {
	font-family: "NomeDaFonte";
	src: url("font.woff2") format("woff2");
}

Veja que nesse caso usamos duas propriedades, a font-family, e src. Na propriedade src passamos o caminho do arquivo com url, o formato do arquivo no o format.

Agora que importamos nossa fonte, precisamos aplicá-la no projeto. Isso é feito da mesma forma que vimos anteriormente, através do seletor CSS.

* {
	font-family: 'NomeDaFonte', sans-serif;
}

Curso HTML5 + CSS3 - Fundamentos

Conhecer o curso

Serviço de fonte externo

A utilização de um serviço externo de fonte pode ser uma boa opção, pelo fato de ser bem prático sua utilização. Seu uso é bem simples, basta você acessar qualquer serviço disponível na internet, o mais comum e confiável é o do próprio Google, que se chama Google Fonts. Nele você seleciona a fonte que quer usar e o site irá gerar uma tag de link, basta adicionar esse link dentro do head do seu site e pronto, essa fonte já pode ser usada.

Vou fazer um exemplo utilizando a fonte Roboto, uma fonte bastante utilizada, primeiro vou adicionar os link no meu HTML que peguei do site Google fonts.

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	
	<!-- Fonte do Google  -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
	
	<title>Meu site</title>
</head>

Agora que temos o link no projeto, basta aplicar a fonte em todos os elementos HTML com CSS, dessa forma:

* {
	font-family: 'Roboto', sans-serif;
}

Vale ressaltar que a adição desses links no projeto, pode acarretar em perda de desempenho, tendo em vista que o navegador irá precisar acessar o local externo para pegar essa fonte após e só após isso aplicá-la no site.

Conclusão

Em resumo, a utilização e manipulação do font family com CSS oferece um poderoso meio de personalização de páginas. Através da seleção de fontes, é possível transmitir uma identidade única, melhorar a legibilidade e criar uma experiência de usuário agradável.

Agora, sabemos como podemos alterar o font family nos nossos projetos. Pratique, faça testes, e veja qual melhor forma você encontra de personalizar seu HTML.

Caso queira, aqui na plataforma existem cursos e formações completas para te auxiliar a compreender melhor o HTML e CSS e ter o poder de manipular do jeito que for necessário seus projetos.