CSS Colocar fonte externa em site

[Fernando Cardoso de Melo]

Olá.

Para quem sabe o que vou perguntar deve ser bem simples. Não entendo quase nada de CSS. Por isso não uso arquivo CSS. Coloco os códigos dentro do HTML

Gente estou montando um site onde a cliente me pediu para colocar um tipo de fonte de letra. Ocorre que nem todos os computadores tem a fonte. Por isso quero usar fonte externa com @font-face.

 

Usei este código no head: 

<style type="text/css">
    @font-face {
      font-family: "Old English";
      src: url("fontes/english1.ttf");
    }

    body { font-family: "Old English" }
  </style>

Indicando que o arquivo com a fonte está no servidor, na pasta fontes. Não funciona e não sei o que está errado.

Olhem o exemplo em http://www.compositorjoelschultzbatista.com/temp.html

No navegador do meu PC funciona porque tenho a fonte. Mas se abro em um PC que não tem a fonte não funciona.

O que pode ser?

[Marcelo Apollo]

Eu precisei fazer isso uma vez, precisei instalar a fonte no meu projeto, com isso ela começou a funcionar certinho

[Samot Ln]

Você linkou a fonte no html? quando adicionamos uma fonte, temos que linkar o css no html e mudar o font family no css

 

[Marcelo Calazans]

@Fernando Cardoso de Melo

Olá colega.

 

Apesar de ser fácil escrever esse código, existem sites online que nos ajudam.

 

Eu uso muito o site abaixo:

 

https://transfonter.org/

 

Acesse o site e adicione essa fonte em .ttf que você tem, após isso converta e faça o download.

 

Ele vai baixar um KIT em css. Depois é só pegar o KIT e adicionar em seu código.

 

Sugiro usar WOFF e WOFF2 nas opções, e certifique-se de que o arquivo da fonte (woff e woff2), estão na pasta do caminho certo.

 

"OBS: Só tome cuidado, pois algumas fontes possuem direitos autorais, e não podem ser usadas de qualquer forma. Veja sempre as declarações antes, para ver se pode ou não usar determinada fonte."

 

Abraços e espero ter ajudado.

[Fernando Cardoso de Melo]

Obrigado a todos que reponderam. Ainda não consegui ajustar. Mas to tentando.

[Marcelo Calazans]

50 minutos atrás, Fernando Cardoso de Melo disse:

Obrigado a todos que reponderam. Ainda não consegui ajustar. Mas to tentando.

Retorna depois se possível, e nos diga por favor se deu certo.

 

Boa sorte ai.

[Luiz Paulo Escobar]

@Fernando Cardoso de Melo 1- linkar a fonte se não for instalada,

@import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@400;500;600;700;800&family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300&family=Mulish:ital,wght@0,300;0,400;0,500;1,200;1,300;1,400;1,500&display=swap');

2 - criar variaveis para se usar a font de maneira mais ágil

:root {
    --font-primary: "Baloo Da 2", Serif;
    --font-secundary: "Josefin Sans",serif;
    --font-action: "Muli", serif;
}

 

[Samot Ln]

Uma forma de fazer isso é ir em sites como  o https://fonts.google.com/ 
Você procura a fonte que você quer, só ver o nome da que você ta querendo usar.
A página da fonte vai ser algo assim: 

 

seleciona os estilos que você quer, bold, italic e tal (só clicar no "select this stile").

Ele vai te dar uma tela assim:

 

Esse <link> você copia no head do seu HTML

e em baixo tem o css, isso é o que você coloca no elemento que você quer mudar a font.

[Luiz Paulo Escobar]

@Samot Ln Uma bora prática é usar o @import  url no CSS como eu fiz ali em cima

@Samot Ln Font é estilo, ainda mais externa

[Samot Ln]

@Luiz Paulo Escobar saquei, grato. O import é no css né?

 

 

[Fernando Cardoso de Melo]

Amigos.

Obrigado a todos.

Consegui resolver. Não sei porque mas o arquivo de fonte que eu estava usando estava corrompido!! Troquei o arquivo e usei este código:

<style>
      @font-face { font-family: 'Old English'; src: url('fontes/Olde English Regular.ttf'); } 
      body {
         font-family: 'Old English'
      }
    </style>

Funcionou!

[Luiz Paulo Escobar]

4 horas atrás, Samot Ln disse:

@Luiz Paulo Escobar saquei, grato. O import é no css né?

 

 

Isso! Assim, com as variáveis CSS você tem uma flexibilidade maior

[Marcelo Calazans]

1 hora atrás, Fernando Cardoso de Melo disse:

Amigos.

Obrigado a todos.

Consegui resolver. Não sei porque mas o arquivo de fonte que eu estava usando estava corrompido!! Troquei o arquivo e usei este código:

<style>
      @font-face { font-family: 'Old English'; src: url('fontes/Olde English Regular.ttf'); } 
      body {
         font-family: 'Old English'
      }
    </style>

Funcionou!

Que bom que deu certo amigo, esse é o mais importante. 

 

Abraços.