Implementing @font-face in custom CSS

  • Author
    Posts
  • #1193918

    anjakdesign
    Member

    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 anjakdesign.com.

    #1194016

    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.

    #1194027

    anjakdesign
    Member

    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!

    #1194035

    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.

    #1194210

    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/

The topic ‘Implementing @font-face in custom CSS’ is closed to new replies.