No desenvolvimento web, o uso correto do estilo da fonte proporciona um visual atraente ao aplicativo. Esses estilos de fonte fornecem pistas visuais sobre a ordem de leitura do documento. Por exemplo, o estilo da fonte do cabeçalho do documento deve ser em negrito e diferente dos demais. O estilo também ajuda a distinguir conteúdo importante de outros.
Os resultados de aprendizagem deste artigo são:
- O que são Google Web Fonts?
- Como importar fontes do Google em HTML?
- Como utilizar o Google Fonts no arquivo CSS?
O que são Google Web Fonts?
A fonte da Web do Google é uma biblioteca de código aberto que contém centenas de estilos ou famílias de fontes. Ele também fornece APIs que nos ajudam a usar fontes da Web com Android e CSS. O Google Fonts é muito mais leve do que outras bibliotecas de fontes e está disponível gratuitamente para uso comercial. Estes são mais fáceis de implementar em qualquer site.
Por padrão, o CSS oferece estilos de fonte fantasia, serifa, sem serifa, cursiva e monoespaçada. O Google Fonts pode ser utilizado se você quiser usar outros estilos de fonte.
Como importar fontes do Google em HTML?
Para usar o Google Fonts em uma página HTML, siga as etapas a seguir.
Etapa 1: selecione a família de fontes
Primeiro, abra o Fontes do Google site oficial e selecione a fonte que você gosta. Por exemplo, escolhemos o “ lagosta dois ' família de fontes:
Etapa 2: selecione os estilos
Em seguida, role para baixo para ver a lista de estilos. Adicione-os à sua coleção clicando no botão “ + ' o sinal:
Etapa 3: visualizar as famílias selecionadas
Para visualizar as famílias selecionadas, clique no ícone destacado abaixo:
Etapa 4: Copie o link para incorporar no HTML
Depois disso, role para baixo e copie o link da família de fontes usando o destaque “ cópia de ”ícone:
Como utilizar as fontes do Google no arquivo CSS?
Para usar a cópia do Google Fonts em CSS para estilizar, siga os exemplos fornecidos.
Exemplo 1
Inclua um “ ” elemento para especificar algum conteúdo ou parágrafo:
< p > “O melhor site de tutoriais” p > Para importar o Google Fonts, cole o código copiado no “
Elemento de estilo “p”
p {família de fontes: 'Lagosta Dois' , cursivo;
alinhamento de texto: centro;
tamanho da fonte: 45px;
cor: rgba ( 64 , 3 , 162 , 0,8 ) ;
}
As propriedades CSS explicadas a seguir são aplicadas ao HTML “ ' marcação:
- “ família de fontes ” é atribuído com o valor “ 'Lagosta Dois', cursiva ”. Esta família de fontes é importada do Google Fonts.
- “ alinhamento de texto ” ajusta o alinhamento do texto.
- “ tamanho da fonte ” determina o tamanho da fonte.
- “ cor ” define a cor da fonte.
A imagem mostra que a família de fontes foi aplicada com sucesso:
Exemplo 2
Vamos dar outro exemplo para importar o “ Nerko Um ” Fonte do Google. Para isso, cole novamente o código da URL da fonte Google “Nerko One” no campo “
Elemento de estilo “p”
p {família de fontes: 'Nerko Um' , cursivo;
espessura da fonte: 300 ;
tamanho da fonte: 30px;
}
O ' família de fontes ”, “ espessura da fonte ', e ' tamanho da fonte ” as propriedades são aplicadas ao HTML “ ' elemento.
Saída
Ensinamos como importar fontes da Web do Google no arquivo CSS.
Conclusão
Para importar Google Fonts em CSS, primeiro visite o Fontes do Google site oficial e selecione o estilo da fonte. Em seguida, copie o código que contém o “ @importar ” e cole-a no arquivo CSS ou na pasta “