Implementing @font-face in custom CSS

• 

  anjakdesign · Member · Mar 23, 2013 at 3:45 pm

  • Copy link
  • Add topic to favorites

  Hey, I’m currently customising my blog and I’m trying to use the @font-face CSS property by hosting the font files on another server and then popping this into the CSS:

  @font-face {
font-family: 'JosefinSlabRegular';
src: http://www.****.com/fonts_anja/josefin/JosefinSlab-Regular-webfont.ttf;
src: http://www.****.com/fonts_anja/josefin/JosefinSlab-Regular-webfont.eot;
src: http://www.****.com/fonts_anja/josefin/JosefinSlab-Regular-webfont.svg;
src: http://www.****.com/fonts_anja/josefin/JosefinSlab-Regular-webfont.woff;
src: format('embedded-opentype'), format('woff'), format('truetype'), format("svg");
font-weight: normal;
font-style: normal;
}

  Then, I’ve hooked up the correct selector to the font-family… but to no avail. Can someone help me!?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Mar 23, 2013 at 4:24 pm

  • Copy link

  Is the code getting stripped out of the CSS?

  Not all @ stuff is supported here at this time in CSS. You do have availability of all the Typekit fonts with the Custom Design upgrade if you can find fonts there that will work for you.

• 

  anjakdesign · Member · Mar 23, 2013 at 4:39 pm

  • Copy link

  OK, great, thanks for that but now I’m a little confused – when I go to change fonts, I just get a typekit kit ID, not the screen where I can actually do anything!

  What do I do now?

  Thanks!

• 

  thesacredpath · Member · Mar 23, 2013 at 4:48 pm

  • Copy link

  Log out, clear your browser cache and cookies, restart your browser and then try again. Perhaps it is a cookie or cache issue. I don’t have the custom design upgrade, so what I know about it is from the support pages and poking around in people’s CSS when helping them.

• 

  designsimply · Member · Mar 25, 2013 at 7:22 pm

  • Copy link

  WordPress.com doesn’t allow loading in outside files such as font files using @font-face.

  This help page explains all the details about how to use Custom Fonts on WordPress.com. Can you take a look at this page and then let me know if you’re still having any trouble?
  http://en.support.wordpress.com/custom-design/custom-fonts/