Como usar fontes da Web externas no CSS
Se você deseja adicionar uma fonte no seu site que não está presente no computador do usuário por padrão, pode usar a regra CSS @font-face para fazê-lo. A regra @font-face especifica que você deve fornecer um certo nome à fonte personalizada e depois apontar para o arquivo de font. Neste artigo, você estabelecerá uma compreensão de como usar fontes da Web externas no CSS. Este tutorial abrange os seguintes tópicos.
- Formatos de fonte
- Como adicionar fontes da Web externas usando CSS
- Formatos de fontes e seu suporte ao navegador.
Vamos começar.
Formatos de fonte
Antes de mergulhar nos detalhes de como adicionar fontes da web externas, primeiro precisamos estabelecer um entendimento básico de diferentes formatos de fonte que explicamos em detalhes abaixo.
Fontes TrueType
As fontes TrueType ou TTF é um formato de fonte padrão fundado pela Microsoft e Apple no final dos anos 80, portanto, é compatível com ambos os sistemas operacionais. É altamente adequado para expandir o suporte para navegadores antigos, especialmente em smartphones.
OpenType Fontes
As fontes OpenType ou OTF é um formato de fonte inventado pela Microsoft nos mesmos padrões que o das fontes TrueType. Este formato é amplamente utilizado na maioria dos sistemas de computador.
Formato de fonte aberto da web
O formato da fonte Woff se originou em 2009 como um formato que cobre os formatos TTF e OTF. Este formato compacta os arquivos e é compatível com todos os navegadores modernos. Tem duas versões, a segunda é chamada de woff 2.0 e compacta arquivos de uma maneira melhor do que a versão mais antiga.
Fontes de openType incorporadas
As fontes do OpenType incorporadas, mais comumente chamadas de EOT, é um formato que é uma compressão de OTF desenvolvida pela Microsoft. Este formato é usado como fontes incorporadas em sites.
Fontes SVG
Um formato de fontes SVG permite exibir SVG na forma de gráficos vetoriais. Isso significa que vários personagens serão exibidos em diferentes cores ou animações.
Agora que aprendemos sobre os vários formatos de fonte, considere as etapas abaixo para entender todo o procedimento de adicionar fontes externas ao seu site.
Como adicionar fontes da Web externas usando CSS
Abaixo, fornecemos um guia passo a passo sobre como você pode adicionar fontes externas usando CSS.
Etapa 1: Baixe fontes personalizadas
O primeiro passo seria baixar as fontes desejadas no formato TrueType Fontes (.TTF) ou o formato OpenType fontes (.freqüentemente) de qualquer repositório de fontes. Por exemplo, aqui estamos baixando fontes 'Dancing Script' do Google Fontes.
Clique na 'Família Download' para baixar fontes personalizadas.
Etapa 2: Extrair arquivos da pasta ZIP
Depois de baixado, extraia arquivos da pasta ZIP.
As fontes estão no .formato ttf. Agora selecione qualquer uma dessas fontes que pertencem à família de fontes 'scripts de dança'.
Observação: Verifique se seus arquivos baixados estão presentes na mesma pasta que o arquivo da web.
O arquivo de fonte está presente exatamente na mesma pasta que o arquivo da web.
Etapa 3: Adicione fontes no seu arquivo CSS
Para suas fontes externas no seu arquivo CSS, use a regra @font-face. A regra @font-face especifica que, primeiro, você deve fornecer um certo nome à fonte personalizada e depois apontar para o arquivo de font, dando o URL ao atributo src.
Atribuímos o nome 'CustomFonts' para a família de fontes, então fornecemos o URL do arquivo de fonte ao atributo src. Por fim, estamos atribuindo a família de fontes ao nosso cabeçalho e dando um pouco de cor.
Etapa 4: vincule seu arquivo CSS ao arquivo html
E, finalmente, adicione sua folha de estilo ao seu arquivo html.
Estamos ligando externamente nosso arquivo CSS ao arquivo html.
Saída
Uma fonte da Web personalizada externa foi adicionada com sucesso.
Formatos de fontes e seu suporte ao navegador
A tabela abaixo mostra todos os formatos de fonte e seu suporte relevante ao navegador.
| Formato de fonte | Microsoft borda | Google Chrome | Raposa de fogo | Safári | Ópera |
|---|---|---|---|---|---|
| Ttf | 9.0 | 4.0 | 3.5 | 3.1 | 10.0 |
| OTF | 9.0 | 4.0 | 3.5 | 3.1 | 10.0 |
| Woff | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| Woff2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| Eot | 6.0 | Não suportado | Não suportado | Não suportado | Não suportado |
| Svg | Não suportado | Não suportado | Não suportado | 3.2 | Não suportado |
Conclusão
Para usar fontes externas no CSS, faça o download de fontes desejadas de qualquer repositório de fontes e adicione-as ao arquivo CSS usando a regra @font-face que especifica um determinado nome à fonte personalizada e aponte para o arquivo de fonte, dando o URL ao SRC atributo. Este tutorial foi projetado para explicar sobre o uso de diferentes formatos de fonte e como as fontes da web externas podem ser usadas no CSS.