Adicionando Fontes Personalizadas a uma Página da Web
Fontes desempenham um papel crucial ao aprimorar o apelo visual de uma página web. Designers criam inúmeras fontes memoráveis e bonitas para causar uma impressão duradoura nos usuários. Sites com fontes mal projetadas podem ter dificuldade em atrair atenção. Felizmente, existem recursos que oferecem acesso gratuito, permitindo que qualquer pessoa utilize fontes pré-criadas. No entanto, é importante observar que também existem fontes licenciadas que exigem compra, sendo fundamental respeitar as leis de direitos autorais para evitar violações.
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/.
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 uma 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 é essencial.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you explain how to use the custom font in my CSS after adding the link?
What should I do if the font doesn't appear correctly on my page?
Are there any best practices for choosing and loading web fonts?
Awesome!
Completion rate improved to 2.56Adicionando Fontes Personalizadas a uma Página da Web
Deslize para mostrar o menu
Fontes desempenham um papel crucial ao aprimorar o apelo visual de uma página web. Designers criam inúmeras fontes memoráveis e bonitas para causar uma impressão duradoura nos usuários. Sites com fontes mal projetadas podem ter dificuldade em atrair atenção. Felizmente, existem recursos que oferecem acesso gratuito, permitindo que qualquer pessoa utilize fontes pré-criadas. No entanto, é importante observar que também existem fontes licenciadas que exigem compra, sendo fundamental respeitar as leis de direitos autorais para evitar violações.
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/.
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 uma 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 é essencial.
Obrigado pelo seu feedback!
