Como usar fonts do Google no CSS
PRÓXIMO
Website Google Fonts
ANTERIOR
Como colocar Google Fonts no HTML
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/
2° 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.
Geralmente os mais comuns são: Light, Italic regular, bold, Extrabold.
3° 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;
4° 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.
5° 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!
Deixe um comentário