Baixe em PDFBaixe em PDFEste artigo foi escrito em parceria com nossa equipe treinada de editores e pesquisadores que validaram sua precisão e abrangência.
O How.com.vn possui uma Equipe de Gerenciamento de Conteúdo que monitora cuidadosamente o trabalho de nossos editores para garantir que todo artigo atinja nossos padrões de qualidade.
Este artigo foi visualizado 8 921 vezes.
Se você quer aprender como importar fontes da web do Google para o seu código CSS, veio ao lugar certo! Para começar a usar o Google Fonts no seu site, você só precisa adicionar um código simples gerado no site do Google Fonts na folha de estilo que você já tem. Nós vamos mostrar como usar o @import class no CSS para exibir fontes da web do Google no seu site.
Passos
Baixe em PDF
Selecione um estilo de fonte. Acesse https://fonts.google.com e clique na fonte que quer usar. Desça pela lista para ver todos os estilos e depois clique em Selecionar este estilo no que mais gostar.[1]
Copie o código. Sob "Usar na web" no lado direito da página, selecione o círculo ao lado de "@import". Agora você verá um código aparecer na caixa. Copie a parte do código que está entre as tags<style></style>. Por exemplo, @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap');.
Abra o arquivo CSS ou o documento HTML. Se estiver usando uma folha de estilo separada, abra o arquivo .css que quer editar no seu editor de texto. Se estiver fazendo CSS in-line, abra o arquivo HTML no qual quer usar a fonte.
Cole o código copiado na sua folha de estilo. Se estiver editando um arquivo CSS separado, cole as informações copiadas do @import no topo da folha, ou seja, na primeira linha. Se estiver trabalhando em um arquivo HTML, cole o código copiado entre as tags<style></style>, que estarão no cabeçalho.[2]
Se estiver trabalhando em um HTML, as informações da fonte devem ficar assim:<!DOCTYPE html><html> <head> <title>Title</title> <style> @import url('https://fonts.googleapis.com/css2?family=Lora&display=swap'); </style> </head> <body> <h1>Lorem Ipsum</h1> </body></html>
Se estiver trabalhando em uma folha de estilo separada, a primeira linha do arquivo CSS ficará mais ou menos assim:
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap');
Defina estilos usando o Google Fonts. Agora que você adicionou o código que torna a fonte disponível para o uso, pode defini-la em estilos, como os elementos body e h1. Por exemplo, se quiser deixar o corpo de texto padrão na fonte Lora a 20px, pode inserir na folha de estilo ou entre suas tags de estilo:body { font-family: 'Lora'; font-size: 20px;}
- Você pode mudar a cor e a aparência da fonte nas propriedades "color" e "font-weight".
- Se quiser adicionar mais efeitos de texto, veja a lista do Google de efeitos de texto suportados no site https://developers.google.com/fonts/docs/getting_started. Existem vários efeitos legais, como animação com fogo, neon e anaglifo!
Salve seu arquivo CSS ou HTML. Assim que você adicionar a fonte em algumas declarações CSS e salvar seu arquivo, está pronto! Carregue a página no seu navegador. Ele vai captar as fontes do Google e exibi-las nas propriedades que você especificar.- Você pode inserir mais de uma fonte do Google no seu código CSS por vez. Só lembre-se de que, já que as fontes estão sendo importadas para o seu CSS, usar muitas causará impacto na velocidade de carregamento. Se quiser incluir várias fontes do Google, é só copiar o código de cada uma que quer usar e colar no seu código da mesma forma como foi mostrado acima.
Publicidade
Sobre este guia How.com.vn
O How.com.vn possui uma Equipe de Gerenciamento de Conteúdo que monitora cuidadosamente o trabalho de nossos editores para garantir que todo artigo atinja nossos padrões de qualidade. Este artigo foi visualizado 8 921 vezes.
Este artigo foi útil?
⚠️ Disclaimer:
Content from Wiki How Português language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.
- - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
- - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
- - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
- - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.
