Baixe em PDF
Baixe em PDF
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] X Fonte de pesquisa
-
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] X Fonte de pesquisa
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 : 20 px ; }
- 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
Publicidade
Inscreva-se na Newsletter Gratuita do wikiHow!
Receba tutoriais úteis em seu email semanalmente!
Inscreva-me!
