CSS como usar google fonts localmente

[Cordas]

Gostaria de saber como vcs usam(se já usaram google fonts local ou não)...

Eu tentei fazer o seguinte:

- baixei as fontes que tenho interesse

- converti de .ttf para woff2

- add o @font-face no css

 

Exemplo

 

@font-face {
font-family: 'Josefin Sans';
src: local('Josefin Sans'), local('Josefin Sans'), url(fonts/AnyConv.com__JosefinSans-Regular.woff2) format('woff2');
}

Não surtiu efeito.

Não desejo simplesmente colar o link do google fonts porque eu percebo que demora um pouco mais do que devia linkando as fontes correspondentes do que se estão já nas pastas do website.

[Public2004]

@Cordas Boas jovem, eu sempre usei online e uma ou outra fonte para projetos específicos locais, instalei no próprio Windows, mas lembro que em algum momento já precisei fazer isso, segue os passos:

Acesse o Google Fonts, escolha a "font" desejada assim como suas variações (tamanhos), "styles" e "weight";

Faça o Download do pacote selecionado;

Converta as "fonts" estáticas ttf para os formatos woff2, eot, wof, usando algum conversor online;

Na raiz do seu projeto, crie uma pasta "fonts" por exemplo e insira as "fonts" ttf + convertidas;

No seu arquivo css, defina as regras para cada estilo de fonte (regular, italic, bold, etc...);

/* Regular Style */
@font-face {
  font-family: "Josefin Sans";
  src: url("fonts/JosefinSans-Regular.eot");
  src: url("fonts/JosefinSans-Regular.eot?#iefix") format('embedded-opentype'),
    url("fonts/JosefinSans-Regular.woff2") format('woff2'),
    url("fonts/JosefinSans-Regular.woff") format('woff'),
    url("fonts/JosefinSans-Regular.ttf") format('truetype');
  font-weight: 300;
  font-style: normal;
}

Basicamente isso.

Att.

[Cordas]

Em 11/06/2020 às 15:48, Public2004 disse:

@Cordas Boas jovem, eu sempre usei online e uma ou outra fonte para projetos específicos locais, instalei no próprio Windows, mas lembro que em algum momento já precisei fazer isso, segue os passos:

Acesse o Google Fonts, escolha a "font" desejada assim como suas variações (tamanhos), "styles" e "weight";

Faça o Download do pacote selecionado;

Converta as "fonts" estáticas ttf para os formatos woff2, eot, wof, usando algum conversor online;

Na raiz do seu projeto, crie uma pasta "fonts" por exemplo e insira as "fonts" ttf + convertidas;

No seu arquivo css, defina as regras para cada estilo de fonte (regular, italic, bold, etc...);

/* Regular Style */
@font-face {
  font-family: "Josefin Sans";
  src: url("fonts/JosefinSans-Regular.eot");
  src: url("fonts/JosefinSans-Regular.eot?#iefix") format('embedded-opentype'),
    url("fonts/JosefinSans-Regular.woff2") format('woff2'),
    url("fonts/JosefinSans-Regular.woff") format('woff'),
    url("fonts/JosefinSans-Regular.ttf") format('truetype');
  font-weight: 300;
  font-style: normal;
}

Basicamente isso.

Att.

Opa muito obrigado, deu certo de ambas maneiras.

Da outra forma:

 

@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;
}