Oi, @Renatoglima! Tudo bem?
Você poderia compartilhar com a gente o código que está utilizando pra tentar importar as fontes? Dessa forma a gente consegue ter um ponto de partida melhor pra poder ajudar 😊
Em resposta a Google Fonts em VSCode
1
1
Fala Hurick, tudo bem mano, e vc?
Segue abaixo o código:
Fontes com Google Fonts @font-face { font-family: 'gelo'; src: url(04B_.TTF) format('truetype'); } @font-face { font-family: 'Pantherdam'; src: url('Pantherdam Signature.otf') format('opentype'); } @font-face { font-family: 'PanI'; src: url(Pantherdam\ Signature\ Italic.otf) format('opentype'); } @import url('https://fonts.googleapis.com/css2? family= Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100; 1.200;1.300;1.400;1.500;1.600;1.700;1.800;1.900 & display=swap'); @import url('https://fonts.googleapis.com/css2?family= Kaushan+Script&display=swap'); @import url('https://fonts.googleapis.com/css2?family= Fredericka+the+Great & display = swap'); @import url('https://fonts.googleapis.com/css2?family= DotGothic16 & display = swap'); body{ font-family: 'Kaushan Script'; } h1 { font-family: 'Fredericka the Great'; font-size: 48px; color: tomato; } h2{ font-family: 'Pantherdam'; font-size: 36px; color: brown; } </style>Titulo
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident ab quis quam neque sunt fugiat eaque repudiandae atque molestias ex! Suscipit exercitationem minus pariatur molestias consequatur atque, eveniet saepe. Iusto.</p>
<h2>Subtitulo com outra fonte</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat, totam consectetur quae atque unde reiciendis beatae vel sit delectus libero ipsum, quibusdam consequuntur exercitationem. Harum nobis dignissimos cumque adipisci possimus?<p>
OBS: deixei tudo numa pagina só para facilitar. As font-faces funcionam perfeitamente!
2
Tudo em ordem por aqui também, meu caro.
Obrigado por perguntar!
Olha, pelo que estava olhando aqui, peguei teu código e colei no meu VS Code pra dar uma olhada, em um arquivo do tipo CSS e o resultado foi o seguinte:
(Clique com o botão direito pra abrir em uma nova guia e poder ver melhor)
Repare que nos links, alguns espaços se encontram aí no meio.
Você pode confirmar se isso também está acontecendo aí no teu código?
Pergunto, porque se for o caso, as fontes não estão sendo encontradas justamente por causa desses caracteres a mais. Os links, sem os espaços extras, seriam o seguinte:
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
Faz o teste aí e me fala 😊
EDIT: Esqueci de avisar que também corrigi alguns . que estavam no meio da fonte Work Sans invés de , que é o correto.
1
Hurick, vc acertou mano, era exatamente esse o problema!
Mas sabe o que é o mais foda? É que eu fiz Ctrl+C Ctrl+V do próprio Google Fonts.
Salvou o Role, muito obrigado!
Vou me atentar quando copiar as fontes de lá
1
HAHAHAHAHA acontece, meu rei, não se preocupe! Eu imaginei que poderia ser algo desse tipo porque eu já vi acontecer, pra ser bem honesto contigo.
O importante é que você resolveu e saiu com um upgrade no conhecimento. Fico muito feliz.
Bons códigos pra você, meu caro! Divirta-se!