Adicionando Fontes Personalizadas
Deslize para mostrar o menu
As fontes influenciam significativamente a aparência e a sensação de um site. Uma tipografia de alta qualidade melhora a legibilidade e torna o design mais marcante. Muitas fontes são gratuitas para uso, enquanto outras exigem licenciamento; sempre respeite as regras de direitos autorais.
Serviço Google Fonts
Há muitas fontes interessantes disponíveis para uso gratuito. Vamos explorar as opções fornecidas por https://fonts.google.com/. É simples adicionar uma fonte do Google ao markup.
Primeiramente, execute o próximo exemplo, que utiliza a fonte padrão. O elemento p possui as seguintes propriedades: font-family (nome da fonte), font-size (tamanho da fonte) e font-weight (espessura da fonte).
index.html
styles.css
A propriedade font-family não funciona porque nosso projeto ainda não reconhece a fonte personalizada "DM Sans". Vamos adicionar a fonte ao projeto usando https://fonts.google.com/.
Clique na imagem para visualizar os detalhes com mais clareza.
No campo de entrada "Search fonts", digite o nome da fonte desejada. Neste caso, "DM Sans". Quando aparecer, clique no cartão de "DM Sans".
Na página da fonte, clique no botão "Obter fonte".
Em seguida, clique no botão "Obter código de incorporação".
Por fim, copie o link e cole-o no arquivo HTML do seu projeto dentro do elemento <head>. É importante inserir o link antes do link para seus estilos personalizados. Isso garante que o navegador carregue primeiro as fontes personalizadas antes de aplicar qualquer estilo que as utilize. Após adicionar o link, "DM Sans" estará disponível como uma fonte personalizada para o seu projeto. Agora, execute o projeto para verificar se tudo está funcionando corretamente.
index.html
styles.css
Podemos observar a diferença entre a fonte personalizada e a fonte padrão. Além disso, cada navegador possui suas próprias fontes padrão. Portanto, saber como utilizar fontes personalizadas em um site é fundamental.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
