Adicionando Fontes Personalizadas a uma Página da Web
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". Adicione a fonte ao projeto utilizando https://fonts.google.com/.
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 "Get font".
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 fonte personalizada para 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
How do I add a Google Font to my HTML file?
What is the purpose of the preconnect links in the head section?
Can you explain the difference between default and custom fonts?
Incrível!
Completion taxa melhorada para 2.56Adicionando Fontes Personalizadas a uma Página da Web
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". Adicione a fonte ao projeto utilizando https://fonts.google.com/.
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 "Get font".
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 fonte personalizada para 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!
