Ir ao conteúdo

Posts recomendados

Postado

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?

Postado

@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.

Postado

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

 

Postado

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: 


image.thumb.png.cc60238bb4c145a15fa71f5592e28449.png

 

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

Ele vai te dar uma tela assim:

image.png.3382a6e1b96470b4b1d633d9f0fc09e8.png

 

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.

  • Obrigado 1
Postado

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!

  • Obrigado 1
Postado
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. 

  • Amei 1

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Ebook grátis: Aprenda a ler resistores e capacitores!

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!