Implementing @font-face in custom CSS

  • Author
  • #1193918


    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


    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.



    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?



    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 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 Can you take a look at this page and then let me know if you’re still having any trouble?

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