Respondendo a "Oi, @Renatoglima! Tudo bem? Você poderia compar..." dentro da publicação Google Fonts em VSCode

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!

hurick

2 anos atrás

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:

imagem
(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.

Renatoglima

Autor

2 anos atrás

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á

hurick

2 anos atrás

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!