3.1 Web Fonts
Conectar fontes em páginas web é crucial para criar um design único e atraente. Web Fonts permitem usar fontes que não estão instaladas no computador do usuário, pois elas são carregadas do servidor. Google Fonts é um dos serviços mais populares para usar web fonts. Vamos ver mais de perto como conectar web fonts e Google Fonts em páginas web.
Web Fonts são fontes que são carregadas de um servidor remoto e exibidas na página web, mesmo que não estejam instaladas no dispositivo do usuário. Isso oferece mais flexibilidade na escolha de fontes e permite criar um design mais atraente.
Conectando Web Fonts
Exemplo de conexão de web fonts usando @font-face:
Primeiro, você precisa carregar os arquivos de fonte para o seu servidor. Normalmente, são arquivos nos formatos .woff, .woff2, .ttf, .eot e .svg.
Passo 2. Usar @font-face no CSS:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
Vantagens de usar @font-face:
- Controle: controle total sobre a escolha e uso de fontes
- Compatibilidade: suporte a vários formatos de fontes para garantir compatibilidade com diferentes navegadores
- WOFF (Web Open Font Format): formato amplamente suportado para web fonts
- WOFF2: versão melhorada do WOFF com compressão superior
- TTF (TrueType Font): formato padrão para fontes, suportado pela maioria dos navegadores
- EOT (Embedded OpenType): formato suportado pelo Internet Explorer
- SVG: formato para usar fontes em gráficos SVG
3.2 Google Fonts
Google Fonts oferece uma coleção de fontes gratuitas que podem ser facilmente integradas ao seu site. A vantagem de usar Google Fonts é a facilidade de conexão e a diversidade de fontes disponíveis.
Conectando fontes usando Google Fonts:
1. Escolha da fonte no site do Google Fonts:
Vá para Google Fonts e escolha a fonte que deseja utilizar.
2. Obtenção do link para conexão:
Na página da fonte escolhida, selecione os estilos e pesos necessários. Depois disso, o Google Fonts gerará um link para conectar a fonte.
3. Inserção do link no documento HTML:
Copie o link gerado e cole-o na seção <head> do seu documento HTML.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
1. Aplicação da fonte no CSS:
Use a propriedade font-family para aplicar a fonte aos elementos na página.
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
Exemplo de uso do Google Fonts via HTML:
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<p>Este texto está exibido utilizando a fonte Roboto.</p>
</body>
</html>
3.3 Usando CSS @import
As fontes do Google também podem ser conectadas usando a regra @import no CSS.
Exemplo de uso do Google Fonts via @import:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
Vantagens de usar Google Fonts:
- Facilidade de uso: fácil integração de fontes com uma única linha de código
- Grande seleção: acesso a uma grande variedade de fontes de diferentes estilos e categorias
- Otimização de desempenho: fontes são carregadas de servidores de alto desempenho do Google
O atributo display="swap" no código de conexão das web fonts do Google Fonts melhora o desempenho e a experiência do usuário. Quando você conecta web fonts, o navegador precisa primeiro carregar e exibir a fonte antes de exibir o texto. Isso pode causar um atraso, especialmente em internet lenta. display="swap" resolve esse problema, instruindo o navegador a usar a fonte do sistema padrão enquanto a web font é carregada. Assim que a web font carregar, o navegador a substituirá pela do sistema.
Impacto no desempenho:
Ao usar web fonts, é importante considerar seu impacto no desempenho da página web. Carregar muitas fontes ou estilos pode aumentar o tempo de carregamento da página. Para minimizar esse impacto, siga estas recomendações:
- Use a menor quantidade de estilos necessários: escolha apenas os estilos que você realmente precisa
- Use o atributo
display="swap": isso garante que o texto seja exibido com a fonte do sistema enquanto a web font carrega, melhorando a percepção de desempenho pelo usuário - Otimização da entrega de fontes: use cache e pré-carregamento (preload) para melhorar o desempenho
GO TO FULL VERSION