- Página Inicial
- Códigos CSS Prontos
- Como colocar Google Fonts no HTML
- Voltar
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!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
633 Visualizações
Deixe um comentário