Solucionado
Olá, pesquisei bastante e ainda não entendi como utilizo diferentes estilos da mesma fonte do Google Fonts, Por exemplo: A fonte Open Sans ( https://fonts.google.com/specimen/Open+Sans#standard-styles ) tem vários estilos em sua apresentação (Light 300; Light 300 italic; Semi-bold 600 italic), gostaria de saber como utilizo eles dentro do CSS.
Olá Matheus.
Bom, primeiro passo é colocar essas fontes dentro do seu arquivo html. Você faz isso selecionando os estilos que você quer no + dentro da fonte escolhida. Então vai aparecer uma aba lateral com os estilos escolhidos (se não aparecer, pode abrir a aba manualmente no ícone com 3 quadradinhos e um +, que fica ao lado do botão de download no canto superior direito da página).
Embaixo, nessa aba, vão ter dois links para você colocar no html, dentro da tag head e outro para colocar no css dentro do body{}.
Exemplo:
<head>
<meta charset="UTF-8">
<title>Barbearia Alura</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,800;1,300;1,400&display=swap" rel="stylesheet">
</head>Quando você quiser mudar o estilo, por exemplo para mais pesado, você usa o font-weight: bold. Para colocar em itálico, você usa o font-style: italic.
Exemplo:
<p>Localizada no coração da cidade a Barbearia Alura traz para o mercado o que há de melhor para o seu cabelo e barba.
Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>
<p class="p1">Nossa missão é: "Proporcionar auto-estima e qualidade de vida aos clientes".</p>
<p class="p2">Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>No css, por exemplo:
body {
font-family: 'Open Sans', sans-serif;
}
p {
font-weight: 300;
}
.p1 {
font-weight: bold;
font-style: italic
}
.p2 {
font-weight: 400;
}Repare que você tem a opção de especificar no font-weight o número que você selecionou. Atenção que se você colocar um número que não foi selecionado ele não vai aplicar o estilo.
Muitíssimo obrigado!!
Só confirmando, caso eu queira usar a fonte Open Sans no estilo "Semi-bold 600 italic" é necessário especificar no CSS:
body{
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-style: italic;
}Que bom que consegui explicar direitinho e você entendeu certo! Fiquei com medo de ter ficado muito grande a explicação, mas é isso mesmo que você escreveu.