A fonte não se aplica quando salvo o projeto. | HTML e CSS: praticando HTML/CSS

3
respostas

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo A dupla HTML e CSS e atividade Lidando com fontes

por Tatyelle Barbosa

| 7.6k xp | 2 posts

Segui as instruções de acordo com o vídeo mas ao salvar, não se aplica.

No HTML: < head> < title>Alura Plus < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="Styles/styles.css"> < link href="https: //fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"> < /head> (coloquei uns espaços após o < para que possam ver o código)

No CSS: :root { --main-color: #FFFFFF; --secondary-color: #C0C0C0; --button-color: #167BF7; --background-color: #00030C; --main-font: 'Inter'; }

No Google fontes https://fonts.google.com/specimen/Inter?query=inter para mim não apresenta opção como na aula "Select this style" ao lado do tamanho, então utilizei a principio o link (não funcionou); tentei o link copiando do video (não funcionou); tentei também este que o google fontes me oferece más também não deu certo...

Poderiam me auxiliar?

3 respostas

por Genilson Moraes Brasil

| 826.9k xp | 26 posts

Sr Software Engineer

2 semanas atrás

Olá Tatyelle, o head do seu código estava incorreto, faltava o fechamento da tag title e o link tinha espaço no começo da tag e no link da url da fonte. Só você utilizar o modelo abaixo que vai funcionar certinho.

<head> 
    <title>Alura Plus</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="Styles/styles.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=Inter:wght@400;700&display=swap" rel="stylesheet">
    <style>
    * {
        font-family: "Inter", sans-serif;
      }
    </style>
</head>

por Tatyelle Barbosa

| 7.6k xp | 2 posts

2 semanas atrás

Olá Genilson,

Obrigada pela resposta rápida.

Para que eu entenda melhor a solução, poderia me explicar o motivo de colocar o item abaixo no HTML e não no CSS?

<style>
* {
    font-family: "Inter", sans-serif;
  }
</style>

por Genilson Moraes Brasil

| 826.9k xp | 26 posts

Sr Software Engineer

1 semana atrás

Sim claro, foi apenas uma forma de ver a fonte aplicando já que não tenho o seu arquivo CSS, porém a boa prática é sempre deixar em um arquivo separado do html igual você fez mesmo <link rel="stylesheet" href="Styles/styles.css">