Carregando...

Como usar fonts do Google no CSS

Postado: 25 de abril de 2023 Tempo de Leitura: 3 Minutos

Como usar fonts do Google no CSS

Neste artigo veremos como importar fonts Google para o seu código CSS.

Primeiro vamos usar o Google Fonts no seu site, você só precisa adicionar um código gerado no site do Google Fonts na folha de estilo do seu site.

Veja passo a passo como usar o @import no CSS para exibir fontes da web do Google no seu Template HTML.

1° acesso o site: https://fonts.google.com/

Fonts Google

Pesquise o nome da fonte que você quer colocar no seu template.

clique na fonte que você quer usar.

Desça pela lista para ver todos os estilos e depois clique em Selecionar este estilo veja na imagem.

Fonts Google listar

Geralmente os mais comuns são: Light, Italic regular, bold, Extrabold.

Fonts Google escolher

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

Agora veja o código gerado na caixa. Copie a parte do código que está entre as tags <style></style>. jeva o exemplo abaixo.

<style>
     @import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap');
</style>

Regras CSS para especificar famílias

font-family: 'Ubuntu Mono', monospace;

Fonts Google importar


Abra o seu arquivo css principal, da sua template geralmente com o nome de (style.css).

Se estiver usando uma folha de estilo separada, abra o arquivo css que você quer inserir a fonte.

Se estiver fazendo CSS in-line, abra o arquivo HTML no qual quer usar a fonte. veja o exemplo.

<html>

    <head>

      <style>
           @import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap');
      </style>
    
    </head>


<body>
   
</body>

</html>

Neste exemplo importamos no nosso arquivo (style.css)

veja na imagem abaixo.

Código Fonte


Salve seu arquivo CSS. Logo você adicionar a fonte em algumas declarações CSS e salvar seu arquivo, está pronto!

Atualize a sua página no seu navegador. Ele vai carregar as fontes do Google e exibi-las nas propriedades que você especificar como: h1, <h2>, <p>, <span> etc..

IMPORTANTE!

Você pode inserir mais de uma fonte do Google no seu site. lembre-se de que as fontes estão sendo importadas para o seu CSS, usar muitas fontes sobrecarregar seu site e deixar lento.

recomendado pode ser até duas fontes diferentes.

Se caso você quiser incluir mais fontes do Google, é só seguir os mesmo passos mostrado a cima.

só que com uma fonte diferente como exemplo: (Open Sans)

Neste artigo amostramos como usar fonts do Google no CSS.

Baixe e Visualize Projeto usado no artigo!

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

1.023 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