How to use TTF as font family in HTML

user_14509534 0
Viewed 2822

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!

webfonts truetype font-face css html
2 Answers

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

user_6630640

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>
user_108674540
Related