Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

[Dúvida] A fonte não ficou com qualidade boa.

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet">

    </head>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

4 respostas

Olá Giuliano, tudo ok por aí?

Isso ocorreu, pois, ao selecionar a fonte, você apenas adicionou font-weight: 100, uma variação da fonte que a deixa fina. Nesse sentido, para alterar o peso da fonte, precisaremos adicionar novas variações dela.

Caso você queira mudar a fonte do seu projeto você irá precisar acessar o site do google fonts e deverá selecionar a espessura que desejar. Para isso basta clicar no sinal de mais ao lado do exemplo de texto daquela fonte.

Captura de tela colorida do site Google fonts mostrando variações da fonte Montserrat e ao lado direito da tela há uma aba onde consta as fontes selecionadas e o link para adicionar ao projeto HTML ou CSS

Por outro lado, você pode usar esse link de referenciação:

<link rel="preconnect" href="https://fonts.googleapis.com/%22%3E
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

No lugar desse aqui que está em seu projeto:

<link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet">

Assim, você poderá editar a espessura da fonte da forma que desejar utilizando a propriedade font-weight: <número que você quiser colocar>;.Por exemplo: font-weight:500 isso pode ser feito no seu arquivo css. Quanto maior o valor colocado, mais espessa é a fonte.

Caso tenha mais dúvidas em relação a esse tópico fico à disposição!

Um grande abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.

me salvou aqui também.. Entendi como arrumar e deu tudo ok.

Eu adicionei no CSS o font-weight : bold, seria uma opção também? Ou essa maneira está errada?

solução!

Olá Pessoal, tudo ok por aí ?

Primeiramente Diogo, fico feliz em poder ter lhe ajudado!

E Welinton, sobre o ponto que você levantou sobre o uso do fonte-weight: bold; eu gostaria de informar que ela funciona sim para aumentar a espessura da fonte do site, contudo de a sua fonte tiver com uma espessura muito fina ela pode acabar não tendo um resultado tão satisfatório.

Contudo ela não está errada e pode sim com certeza ser usada para aumentar a espessura.

Em suma ela pode ser usada sim, mas existem momentos que pode não gerar um resultado tão satisfatório.

Um grande abraço e bons estudos pessoal.