Carregando...

Website Google Fonts

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

Website Google Fonts

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:

Vá até o site do Google Fonts, e pesquise por (Open Sans) selecione o estilo desejado como: (light), (médio), (bold) e (extra bold).

Com a fonte selecionada, clique no botão “Família selecionada”.

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:

  1. Praticidade de usar.
  2. Compatível com quase tudo que utiliza a Internet: tipos de telas, versões e idiomas.
  3. Você pode adicionar suas fontes favoritas do Google a uma coleção.
  4. Ele oferece estatísticas sobre o impacto da força na velocidade de carregamento da sua página da web.
  5. 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 !

Como usar fontes do Google no CSS passo a passo.

Publicado por: Loop Nerd

562 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