0

I am hoping I can get some help here, would really appreciate it. I am trying to use a custom font...but for some reason it is not working... this is my code so far:

<style>
@font-face {
font-family: "coolest";
src: url('http://domain.com/fonts/lalo.ttf') format('truetype');
}

h1 {
font: 'coolest';

}
</style>

<h1>HELLO</h1>
kosta p
  • 13
  • 4
  • That question asks generally how to get `@font-face` to work, kosta p appears to have some understanding of how it works but it is not working as they expect. – Godwin Dec 19 '14 at 18:17

1 Answers1

0

Assuming that you're referencing the font file correctly, the problem is that your not using the font rule correctly. The font shorthand takes a mandatory font-size first, then the font-family. Try this instead:

font-family: 'coolest';

or:

font: 12px 'coolest';

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/font

Example: http://codepen.io/Godwin/pen/zxBLWW/.

Godwin
  • 9,739
  • 6
  • 40
  • 58
  • Thanks for your reply... It is still not working, for some reason it is referencing another font or something ... really not sure, but please note that I am not a developer... – kosta p Dec 19 '14 at 21:13
  • Make sure the URL for you font is correct, try copy and pasting your url into your address bar and see if it downloads. Check for errors in you console (F12). If you are referencing fonts from an external site, you may be getting a "Cross-Origin Resource Sharing policy" error. – Godwin Dec 19 '14 at 21:18
  • Hmmm I just checked and it does in fact download the file...thanks – kosta p Dec 19 '14 at 21:31
  • Ok, at this point you're going to have to go do some more investigating and reading (like the link Nico posted above). It could be a number of things, try different fonts, different browsers, also look for errors in your developer tools and make sure your rule is getting applied. Best of luck! – Godwin Dec 19 '14 at 21:35