CSS Problema ao importar fontes no CSS

Bernardo Lansing · 14 de setembro de 2020

Estou tentando importar a fonte Titillium Web por meio do Google Fonts. O problema que estou tendo é que isso só dá certo dependendo da posição em que eu coloco a linha do @import. Vou mostrar:

@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');
@font-face {
	font-family: 'Bubblegum';
	src: url('../_fonts/bubblegum-sans-regular.otf');
}

Assim dá certo, tanto no texto que usa a fonte Titillium quanto no que usa a Bubblegum. No entanto, ao escrever assim:

@charset 'UTF-8';
@font-face {
	font-family: 'Bubblegum';
	src: url('../_fonts/bubblegum-sans-regular.otf');
}
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');

Apenas o trecho de Bubblegum funciona, o outro texto é mostrado com a fonte padrão do navegador em sans-serif. A seguir, o código do estilo dos dois textos:

header#cabeçalho h1 {
	font-family: 'Bubblegum', sans-serif;
	font-size: 30pt;
	color: #606060;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
	margin: 20px 0px 0px 0px;
}

header#cabeçalho h2{
	font-family: 'Titillium Web', sans-serif;
	font-size: 15pt;
	color: #888888;
	margin: 1px 0px 9px 0px;
}

P. S.: foi só a minha conta do Clube do Hardware que foi "zerada", perdendo toda a reputação e contribuições anteriores?

Cordas · 25 de setembro de 2020

@Bernardo Lansing porque você não faz local? Eu sempre imaginei ou tento imaginar que se usar @import existirá um tempo maior para carregar as fonts(caso seja um momento que eles tenham problemas no server). Talvez eu pense errado, mas ninguém me deu essa resposta ainda por aqui e deixei para pensar como eu penso. Quer testar? Usa @import e veja que antes de ter a página carregada, as fontes padrões do html aparecerão por um período bem curto e depois serão carregadas. Usando local, nunca vai acontecer. Acho que usando fontes ou icons ou qualquer porcaria que venha de outro servidor vai empatar no carregamento da página. O mesmo ocorre se você usa um arquivo .png ou .svg. Por causa do tamanho do arquivo vai demorar a carregar. Eu costumo comparar isso.

No exemplo:

Na figura acima eu coloquei como eu sempre faço.

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" >
    </head>
<body>
    <h1>Testando 'Google Fonts Local'</h1>
    <h2>Primeira Google Font - Josefin Sans</h2>
    <div>
    <p class="p1">With an external style sheet, you can change the look of an entire website by changing just one file!With an external style sheet, you can change the look of an entire website by changing just one file!With an external style sheet, you can change the look of an entire website by changing just one file!With an external style sheet, you can change the look of an entire website by changing just one file!With an external style sheet, you can change the look of an entire website by changing just one file!With an external style sheet, you can change the look of an entire website by changing just one file!With an external style sheet, you can change the look of an entire website by changing just one file!With an external style sheet, you can change the look of an entire website by changing just one file!With an external style sheet, you can change the look of an entire website by changing just one file!With an external style sheet, you can change the look of an entire website by changing just one file!</p>
        <h2>Segunda Google Font - Lobster Two</h2>
        <p class="p2">With an external style sheet, you can change the look of an entire website by changing just one file!With an external style sheet, you can change the look of an entire website by changing just one file!With an external style sheet, you can change the look of an entire website by changing just one file!With an external style sheet, you can change the look of an entire website by changing just one file!With an external style sheet, you can change the look of an entire website by changing just one file!With an external style sheet, you can change the look of an entire website by changing just one file!With an external style sheet, you can change the look of an entire website by changing just one file!With an external style sheet, you can change the look of an entire website by changing just one file!With an external style sheet, you can change the look of an entire website by changing just one file!</p>
    </div>
    </body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
div{
    width: 80vw;
    height: auto;
    border: 1px solid red;
    text-align: justify;
    margin: auto;
}
div .p1{
    font-family: 'JosefinSans-Regular';
}
div .p2{
    font-family: 'LobsterTwo';
}
h1{
    text-align: center;
}
h2{
    text-align: center;
}
/*FONTS*/
@font-face {
  font-family: "JosefinSans-Regular";
/* Modern Browsers */
  src: url("../fonts/JosefinSans-Regular.woff2") format("woff2"); 
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "LobsterTwo";
/* Modern Browsers */
  src: url("../fonts/LobsterTwo-Regular.woff2") format("woff2"); 
  font-weight: normal;
  font-style: normal;
}

arquivo 'fonts' = aqui você faz download da font que você deseja (seja do google fonts ou qualquer outro website com fonts). Pegue o arquivo com a font e converta para por exemplo woff2...eu uso sempre esse site https://www.font-converter.net/en e escolhe só a opção que você vai precisar "woff")

fonts

Então é isso.

Resultado:

Adriano_web · 28 de setembro de 2020

Olá @Bernardo Lansing tudo bem? Então, o motivo é que a regra @import sempre tem que ser declarada no início de uma folha de estilos CSS. No caso aí, apenas a @UTF - como tem maior prioridade e como é uma regra para configuração de caracteres gerais do arquivo - estará sempre um nível acima.