Website Google Fonts
Flip card css Efeito Vertical
Como usar fonts do Google no CSS
Website Google Fonts
Google Fonts veja como usar as fontes disponíveis do Google no CSS e HTML do seu site.
O uso das Fontes é gratuito e tem mais de 1000 fontes para escolher.
Explore sua criatividade e veja qual a melhor fonte para seu próximo projeto. com uma ampla coleção de fontes disponibilizadas pela equipe do Google Fonts.
O que é Website Google Fonts?
Site de fontes do Google é uma coleção com centenas de fontes open source e gratuitas para uso pessoal ou comercial em seus projetos web.
Google Fonts é basicamente uma enciclopédia de fontes de código aberto desenvolvidas pelo Google. Deve-se notar que não é o único de seu tipo e você poderá encontrar alguns projetos colaborativos de código aberto onde os designers compartilham e criam diferentes estilos tipográficos para uso público pela comunidade.
Por que usar as fontes do Google?
Existem milhares de repositórios de fontes na internet, No entanto o que exatamente torna as fontes do Google tão especiais?
Uma das características que uma página da web deve ter é um estilo de fonte que seja agradável aos olhos do usuário. Se você está começando a trabalhar como Front-end. o CSS tem um papel muito importante nas paginas web formatos, cores e fontes. Portanto o Google Fonts ou talvez outras fontes gratuitas soam familiares para você. Não é por menos, já que esta ferramenta se tornou um elemento muito útil para desenvolvedores web.
Neste artigo vamos mostrar a importância de usar a tipografia correta no design da sua marca e a opção Google Font. Você aprenderá como instalar qualquer fonte disponível em seu site e algumas dicas para parecer mais profissional.
Como usar as fonts do Google
Basta adicionar um link de folha de estilo especial na seção <head> e, em seguida, consultar a fonte no CSS.
Deve-se levar em conta que é um recurso externo, o que implica aumentar o tempo de carregamento de nossa página web, sempre que quisermos usá-los sem hospedá-los em nosso servidor web. Não é recomendado usar mais de 3 fontes diferentes do Google usando este método de upload.
Ao implementar o Google Fonts em sua página da Web, lembre-se de que você deve ter conhecimentos básicos de HTML e CSS e existem basicamente duas maneiras de adicionar a fonte à sua página. No primeiro caso, para adicionar a fonte desejada, você deve seguir os seguintes passos:
1° Vá até o site do Google Fonts, e pesquise por (Open Sans) selecione o estilo desejado como: (light), (médio), (bold) e (extra bold).
2° Com a fonte selecionada, clique no botão “Família selecionada”.
3° Copie o código HTML padrão fornecido pelo Google Fonts no cabeçalho da sua página da web, entre as tags de cabeçalho.
ou seja o link gerado pelo google.
<link href="https: //fonts.googleapis.com/css2?family= Open+ Sans :wght@300;400;600;800 & family= Saira:wght@100;200;500;900 & display=swap" rel="stylesheet">
Veja o exemplo na prática
cópie este código no bloco de notas salve como index.html que você vai ver o resultado.
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&family=Saira:wght@100;200;500;900&display=swap" rel="stylesheet">
<style>
.title { font-size:1.5em; font-family: 'Open Sans', sans-serif; }
.texto { font-size:1em; font-family: 'Saira', sans-serif; }
</style>
</head>
<body>
<h1 class="title">Titulo com a font - Open Sans </h1> <br>
<p class="texto">Texto com a font - Saira</p>
</body>
</html>
Motivo pelas quais você deve usar o Site de Fontes do Google:
- Praticidade de usar.
- Compatível com quase tudo que utiliza a Internet: tipos de telas, versões e idiomas.
- Você pode adicionar suas fontes favoritas do Google a uma coleção.
- Ele oferece estatísticas sobre o impacto da força na velocidade de carregamento da sua página da web.
- Permite escolher os pacotes de caracteres e alfabetos disponíveis.
Agora que você já sabe, usar o Site de Fontes do Google é a melhor opção para o seus projetos web.
Veja Também neste outro artigo !
Deixe um comentário