Como colocar Google Fonts no HTML
PRÓXIMO
Como usar fonts do Google no CSS
ANTERIOR
Footer HTML e CSS Formato Ondulado
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.
2° Selecione o estilo da fonte, geralmente as variações são: Light, Italic, Regular, Bold e Extrabold. logo em seguida clique no botão SUPERIOR.
3° 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.
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!
Deixe um comentário