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 (peso 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 ver os detalhes com mais clareza.
No campo de entrada "Search fonts", digite o nome da fonte desejada. Neste caso, é "DM Sans". Quando ela aparecer, clique no cartão de "DM Sans".
Na página da fonte, selecione o 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 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
