Como importar o Google Web Fonte no CSS?
No desenvolvimento da web, o uso correto do estilo de fonte fornece uma aparência atraente para o aplicativo. Esses estilos de fonte dão pistas visuais sobre a ordem de leitura do documento. Por exemplo, o estilo de fonte do documento que chefie deve ser ousado e significativo dos outros. O estilo também ajuda a distinguir conteúdo importante de outros.
Os resultados de aprendizado deste artigo são:
- O que são fontes da web do Google?
- Como importar fontes do Google em HTML?
- Como utilizar fontes do Google no arquivo CSS?
O que são fontes da web do Google?
Google Web Fonte é uma biblioteca de código aberto que contém centenas de estilos de fonte ou famílias. Ele também fornece APIs que nos ajudam a usar fontes da web com Android e CSS. As fontes do Google são muito mais leves que outras bibliotecas de fontes e estão disponíveis gratuitamente para uso de negócios. Estes são mais fáceis de implementar em qualquer site.
Por padrão, o CSS oferece estilos de fontes de fantasia, serif, sem serif, cursivo e monofácio. As fontes do Google podem ser utilizadas se você quiser usar outros estilos de fonte.
Como importar fontes do Google em HTML?
Para usar as fontes do Google em uma página HTML, siga as etapas a seguir.
Etapa 1: selecione a família da fonte
Primeiro, abra o site oficial do Google Fontes 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 “+" sinal:
Etapa 3: Ver Famílias Selecionadas
Para ver 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 destacado “cópia deÍcone:
Como utilizar fontes do Google no arquivo CSS?
Para usar a cópia do Google Fonts no CSS para estilo, siga os exemplos fornecidos.
Exemplo 1
Inclua um “ “O melhor site tutorial” Para importar as fontes do Google, cole o código copiado no “”Tag do arquivo html: Elemento de estilo “P” A seguir, as propriedades do CSS explicadas são aplicadas ao HTML “ A imagem mostra que a família de fontes é aplicada com sucesso: Exemplo 2 Vamos dar outro exemplo para importar o “Nerko um”Google Fonte. Para esse fim, coloque novamente o código para “Nerko One” Google Font URL no “" elemento: Elemento de estilo “P” O "família de fontes","espessura da fonte", e "tamanho da fonte”As propriedades são aplicadas ao HTML“ Saída Ensinamos a você como importar fontes da Web do Google no arquivo CSS. Conclusão Para importar fontes do Google no CSS, primeiro visite o site oficial do Google Fontes e selecione o estilo da fonte. Em seguida, copie o código que contém o “@importar”Palavra -chave e cole -a no arquivo CSS ou no“”Elemento do arquivo html. Este estudo demonstrou o procedimento completo de importação do Google Fontes para um arquivo CSS. @import url ('https: // fontes.googleapis.com/css2?família = lagosta+dois: ital@1 & display = swap ');
P
Fonte-família: 'lagosta dois', cursiva;
Alinhamento de texto: centro;
Size da fonte: 45px;
Cor: RGBA (64, 3, 162, 0.8);
@import url ('https: // fontes.googleapis.com/css2?Family = Nerko+One & Family = Oswald: wght@500 & Family = Pacifico & Display = Swap ');
P
Fonte-família: 'Nerko One', cursiva;
Peso da fonte: 300;
tamanho da fonte: 30px;