Carregando...

Como colocar Google Fonts no HTML

Postado: 26 de abril de 2023 Tempo de Leitura: 2 Minutos

Como colocar Google Fonts no HTML

Google Fonts veja como usar as fontes disponíveis do Google no CSS e HTML do seu site. 

Google Fonts é um diretório de fontes online do google que você pode usar gratuitamente em seus projetos web.

Neste artigo veremos como linkar o Google Fonts no seu html a passo a passo.

1° Acesse o Google Fonts, e pesquise o nome da fonte desejada e clique sobre ela.

Pesquisar o nome da fonte

2° Selecione o estilo da fonte, geralmente as variações são: LightItalic, RegularBoldExtrabold. logo em seguida clique no botão SUPERIOR.

Selecione o Estilo

Copie o código HTML Gerado . Sob (Usar na web) no lado direito da página, selecione o Botão da opção (link).

Agora veja o código gerado na caixa. Copie o código e cole entre as tags. <head></head>

Veja o exemplo na imagem abaixo.

Pegue o link

Veja o código HTML completo página que usamos neste artigo.

Como colocar Google Fonts no HTML

<html>

    <head>

        <link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">    

        <style>
            
            *{
              
                margin: 0; 
                padding: 0; 
                box-sizing: border-box; 
                -moz-box-sizing: border-box; 
                -webkit-box-sizing: border-box; 
            }

        	.title { 

                width:100%; 
                float:left; 
                text-align: center; 
                font-size:3.5em; 
                font-family: 'Satisfy', cursive;
                padding-top: 20px;
                margin-bottom: 20px; 

            }
            
            .texto { 

                width:100%; 
                float:left; 
                text-align: center; 
                font-size:2em; 
                font-family: 'Satisfy', cursive;
                margin-bottom: 20px; 

            }

            a { 

                width:100%; 
                float:left; 
                text-align: center; 
                text-decoration:underline; 
                color:blue;
                font-size: 1.5em; 
                font-family: 'Satisfy', cursive;

            }
  	
        </style>
    
    </head>


<body>

   <h1 class="title">fonte - Satisfy </h1> <br>
   <p class="texto">Texto com a font - Satisfy</p>
   <a href="https://www.loopnerd.com.br/tag/font-google/" target="_blank" title="Saiba mais">Saiba mais</a>
   
</body>

</html>

Baixe e Visualize Projeto usado no artigo!

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

552 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados