0

bom dia tudo bem com vocês? Seguinte... Eu baixei e instalei a font Abandon e no photoshop ela fica ótima, aí, fui lançar no html com o comando

@font-face {
    font-family: abandon;
    src: url('..//fonts/AbandoN.ttf');
    /**titulo**/
}

e quando chamo no html fica diferente, a textura(que é o melhor da fonte) da font fica diferente, quase sumindo... eu quero deixar a fonte no html igual a como fica no photoshop...o que eu posso fazer para consertar?

1
  • Tente aumentar o tamanho da letra. Estou achando que você precisa digitar abadon com A maiúsculo
    – riki481
    12/06/2019 às 10:17

1 Resposta 1

0

O problema é mais simples do que parece... Link para download da font caso alguém quera testar Font Abandon https://www.dafont.com/pt/abandon2.font

Eu usei a font em um <H1> e olha como renderizou nos Browsers. A tag <h1> no Chrome já vem com BOLD por default, ai a font ficou ruim!

inserir a descrição da imagem aqui



Já quando eu tirei o BOLD e deixei com font-weight: normal; a fonte renderizou perfeita no Chrome!

inserir a descrição da imagem aqui

Esse foi o código que usei

@font-face {
    font-family: 'abandonregular';
    src: url('AbandoN.ttf');
    src: url('AbandoN.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}

h1 {
	font-family: 'abandonregular';
	font-weight: normal;

	font-size: 150px;
}

p {
	font-family: 'abandonregular';
}
<h1>Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum dolor sit.</p>


Aqui tem um link com a fonte funcionando e renderizando bem

3
  • deu certo!! perfeito!!! muito obrigado!!!
    – Horacio J.
    12/06/2019 às 18:36
  • @HoracioJ. legal que resolveu! Tmj! 💪
    – hugocsl
    12/06/2019 às 18:36
  • eu que agradeço!! grande abraço e mais uma vez, muito obrigado!!! tmj💪
    – Horacio J.
    12/06/2019 às 20:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .