Como usar fontes do Google em HTML e CSS

Existem inúmeras fontes disponíveis em HTML e CSS, mas se você não estiver satisfeito com as fontes HTML/CSS padrão e opte por algumas fontes novas, novas e mais recentes, então você pode usar fontes do Google. Google Font é a biblioteca on -line do Google que nos permite usar diferentes famílias de fontes por meio de CDN (sigla de rede de entrega de conteúdo), que é gratuita para todos para todos.

Este artigo o guiará nos seguintes aspectos sobre as fontes do Google:

• Guia passo a passo para fontes do Google
• Como usar várias fontes do Google
• Como estilizar fontes do Google

Guia passo a passo para fontes do Google

Para usar as fontes do Google, você deve seguir as seguintes etapas:

Primeiro passo
Visite o site oficial do Google Fonts e a seguinte janela aparecerá:

Segundo passo
Selecione a família de categoria/ fonte de sua escolha:

Terceiro passo
Selecione a fonte do Google de sua escolha (e.g. quintessentia):

Agora clique no “Selecione este estilo”:

Quarta etapa
Copie o link do estilo selecionado da janela que aparece no lado direito da tela:

Cole o link na seção principal do documento HTML:

Quinto passo
Copie as regras CSS para a família de fontes

E cole -o no arquivo CSS:

Queremos aplicar o estilo no

elemento para que colá -lo no seletor P. Agora vamos obter a seguinte saída:

A saída mostra que a fonte A Google "por excelência" é implementada no

elemento com sucesso.

Como usar várias fontes do Google

Todo o procedimento será o mesmo, selecione as múltiplas fontes do Google, copie o link e cole -o na seção principal do arquivo html:

Html

Fontes CSS

Primeiro parágrafo

Segundo parágrafo

CSS

Agora selecionamos duas fontes diferentes do Google I.e. "Consolador" e "Open Sans", queremos usar "Consolador" para o

elemento e "aberta" para o

elementos. Então, nosso CSS ficará assim:

H3
Fonte-família: 'Consolador', cursiva;

P
Fonte-família: 'Open Sans', sem serrif;

No arquivo CSS, cole as regras CSS em seletores de elementos para estilizá -los de acordo com a escolha. Ele produzirá a seguinte saída:

A saída prova que as regras CSS são implementadas com sucesso nos elementos HTML.

Como estilizar fontes do Google

Com a ajuda das propriedades do CSS, podemos estilizar as fontes do Google de acordo com a nossa escolha, nosso arquivo HTML permanecerá o mesmo e o arquivo CSS ficará assim:

CSS

H3
Fonte-família: 'Consolador', cursiva;
cor vermelha;
Shadow de texto: 5px 5px 5px #83647E;

P
Fonte-família: 'Open Sans', sem serrif;
cor vermelha;
Shadow de texto: 5px 5px 5px #83647E;

A saída do snippet acima será assim:

Conclusão

Para adicionar fontes do Google, procure as fontes do Google, selecione a categoria de fonte e a família e selecione o estilo de fonte de sua escolha. Depois de selecionar a fonte, "Copie o link da fonte", das "janelas das famílias selecionadas" e cole -a na seção principal do arquivo html. Em seguida, copie as “Regras CSS para o Link das Fontes” e cole -o no seletor CSS. O estilo pode ser adicionado às fontes do Google usando as propriedades CSS.