different font abandon on the web

Question

Morning all right with you? Next... I downloaded and installed the Abandon font and in photoshop it looks great, then, I launched in html with the command

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

and when I call in html it looks different, the texture (which is the best of the font) of the font looks different, almost disappearing... i want to leave the font in html equal to how it looks in photoshop...what I can do to fix?

Answer 1

The problem is simpler than it seems... Link to download the font if someone wants to test Font Abandon https://www.dafont.com/pt/abandon2.font

I used the font on a <H1> and look how it rendered in the Browsers. The tag <h1> in Chrome already comes with BOLD by default, ai a font ficou ruim!

---

Already when I took the BOLD and left with font-weight: normal; the font rendered perfect in Chrome!

That’s the code I used

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

Here is a link with the source working and rendering well