Olá, meu código html não está lendo as fonts importadas do google fonts e o erro que aparece quando inspeciono é esse. Não faço ideia como resolver
Refused to apply style from 'https://fonts.googleapis.com/css2?%20family%20=%20Roboto%20+%20Slab:%20wght%20@%20600%20&%20display%20=%20swap' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
hoje, com a Alura e o Google Gemini
Fala Eder, tudo bem? Espero que sim!
Como você está fazendo a importação da fonte?
Aguardo o retorno :D
Eu já tentei de todas as maneiras, importando no css e colocando o link no html. Já tentei diversas fontes e nada de mudar. Ao inspecionar o html até faz a leitura, mas a fonte não muda e me deparo com esse erro.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio | Eder Bronson</title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/cabecalho.css">
<link rel="stylesheet" href="assets/css/sessao_destaque.css">
<link rel="stylesheet" href="assets/css/reset.css">
<script src="https://kit.fontawesome.com/70884030e4.js" crossorigin="anonymous"></script>
<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 = Roboto + Slab: wght @ 600 & display = swap " rel =" stylesheet ">
</head>
<body>
<header>
<div class="cabecalho">
<h1><img class="cabecalho__logo" src="assets/img/LogoEB_cabecalho.png" alt="Logo Eder Bronson "></h1>
<nav>
<ul class="cabecalho__icones">
<li><a href="#"></a><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"></a><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"></a><i class="fa-brands fa-youtube"></i></a></li>
<li><a href="#"></a><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"></a><i class="fa-brands fa-soundcloud"></a></i></li>
<li><a href="#"></a><i class="fa-brands fa-github"></i></a></li>
<li><a href="#"></a><i class="fa-brands fa-medium"></i></a></li>
<li><a href="#"></a><i class="fa-brands fa-behance"></i></a></li>
<li><a href="#"></a><i class="fa-brands fa-tiktok"></i></a></li>
<li><a href="#"></a><i class="fa-brands fa-facebook-f"></a></i></li>
</nav>
<a href="#" class="btn">me contrate</a>
</div>
</header>
<section class="destaque">
<img class="eder__destaque" src="assets/img/eder1.png">
<div class="sessao__destaque">
<h1 class="nome">Oi, sou Eder Bronson</h1>
<h2 class="front">Front End Developer</h2>
<h1 class="prof">Jornalista</h2>
<h3 class="linha">mais de 15 anos de experiência <br> em diversas formas de se expressar</h3>
<a href="#" class="sessao__destaque--btn1">baixe meu cv</a>
<a href="#" class="sessao__destaque--btn2">me contrate</a>
</div>
</section>
</body>
</html>.cabecalho {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
}
.cabecalho__logo {
cursor: pointer;
}
.cabecalho__logo:hover {
transition: transform .2s;
transform: scale(1.1);
}
.cabecalho__icones {
color: #FFFFFF;
font-size: 50px;
display: flex;
text-decoration: none;
}
.fa-brands {
margin: 1.5rem;
}
.fa-brands:hover {
color: #FBD87A;
cursor: pointer;
transition: transform .2s;
transform: scale(1.1);
}
.btn {
background-color: #FBD87A;
color: #000000;
text-decoration: none;
border: 2px solid transparent;
padding: 10px 25px;
border-radius: 30px;
transition: transform .2s;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.btn:hover {
transform: scale(1.1);
}