CODEWITHSUNDEEP
htmlcssfont-facewebfontstruetype
littlemissgrady
littlemissgrady

Reputation: 31

How to use TTF as font family in HTML

Can someone please help? I'm trying to reference the magnum font (URL attached) to my HTML. I've tried to use the src:url("Fonts/Magnum.ttf") from where I uploaded it to my file manager and still no luck so trying with the below but it just isn't working.

@font-face{
  font-family: 'MyWebFont';
  src: url("/https://fontmeme.com/fonts/magnum-fakhrul-razi-font/")
  format('truetype'), 
}

Thank you!

Upvotes: 3

Views: 11650

Answers (2)

David
David

Reputation: 4516

That url is not the link to the font, but a website where you have a link to download it.

You should place it into your website and then "describe" it in your CSS:

@font-face {
  font-family: 'MyWebFont';
  src: url('path/to/your/font.ttf');
}

and then, wherever you want to style using this font, use font-family: 'MyWebFont', notice that the font-family name must be the same as the one given above:

.myStyle {
  font-family: 'MyWebFont'
}

Find more about @font-face here: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

Upvotes: 7

A Haworth
A Haworth

Reputation: 36492

After I had gone to this website https://fontmeme.com/fonts/magnum-fakhrul-razi-font/ and downloaded the font this worked for me. Note, I put the font into the same folder as my HTML file just for a test. You will probably want to put it in something called fonts/ or similar.

<style>
@font-face{
  font-family: 'MyWebFont';
  src: url(magnum.ttf); 
}
div {
  font-family: MyWebFont,Courier;
}
</style>
<div>Some text</div>

Upvotes: 1

Related Questions