0

I'm trying to load some personal fonts (@font-face) from a css file.

If I use:

<link href="css/style.css" type="text/css" rel="stylesheet" media="all">

the fonts don't load.

However, using:

<style>@import url('css/style.css');</style>

they load!

Shouldn't the first method work as well? That's the one I've always used... it's my first time using @font-face though.

Note that with the 1st method the CSS is being applied just fine. It's just the font's that don't load...

Edit:

My CSS starts like this:

@font-face {
    font-family:'MyFont-Bold';
    src: url('../type/MyFont-Bold.eot');
    src: url('../type/MyFont-Bold.eot?#iefix') format('embedded-opentype'),
         url('../type/MyFont-Bold.woff') format('woff'),
         url('../type/MyFont-Bold.ttf') format('truetype'),
         url('../type/MyFont-Bold.svg#MyFont-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-2212;
}
Cheng Zhaa
  • 61
  • 1
  • 10
  • create font.css and in style.css @import(font.css) – Legendary Mar 20 '15 at 09:16
  • or use google font throw direct link (google fonts - google it) – Legendary Mar 20 '15 at 09:17
  • Google fonts is a no go. I'm using a custom font. But I like your first idea. I'm gonna give it a go. Thanks. – Cheng Zhaa Mar 20 '15 at 09:24
  • That said, is there a reason why fonts loaded with @font-face don't render using – Cheng Zhaa Mar 20 '15 at 09:26
  • Show your css, no idea how you implemented it. Fonts work fine for me (and probably everybody else) when using ``. –  Mar 20 '15 at 09:32
  • @IkoTikashi there's nothing special about it. `@import url(...` to load the css the fonts render fine. – Cheng Zhaa Mar 20 '15 at 09:41
  • It's a path thingy I guess, if you `@import` paths are relative to your root, if you `link`, paths will be relative to `/css/` –  Mar 20 '15 at 09:44
  • Just use correct URLs in your font-face `src` and it will work both ways. When you `` than all URLs inside css are relative to css file itself. If you `import`, than URLs inside are relative to html file. Best way is to start with root as: `/styles/fonts/myfont.ttf`, which means `styles` folder is on root. – skobaljic Mar 20 '15 at 09:48
  • okay, that makes some sense... any downside to sticking with `@import` instead of `link`? – Cheng Zhaa Mar 20 '15 at 09:49
  • [Dont use @import](http://www.stevesouders.com/blog/2009/04/09/dont-use-import/) explains all. – skobaljic Mar 20 '15 at 09:57
  • @skobaljic thx for the info, but it looks like: a) if I'm only loading one stylesheet using `@import` it shouldn't cause any problems... b) that article is from 2009, I'm not sure how accurate it stands... – Cheng Zhaa Mar 20 '15 at 10:05
  • Mate, use valid URLs in your css, don't bother importing. Cheers – skobaljic Mar 20 '15 at 10:08

1 Answers1

1

create font.css and in style.css @import(font.css)

read this for ur second question: http://www.htmldog.com/guides/css/advanced/atrules/

Legendary
  • 2,243
  • 16
  • 26