Need help? Check out our Support site, then


CSS editor is stripping web fonts

  1. We need to use web fonts to match our design. Our corporate font is Open Sans, freely available through Google web fonts.

    I'm using the WP CSS editor to append to the theme's stylesheet:
    https://turbovote.wordpress.com/wp-admin/themes.php?page=editcss

    If I include an @import line, it's stripped entirely:
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700);

    If I include the @font-face rules like so:
    @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
    }

    the URLs are stripped, rendering them useless:
    @font-face {
    font-family:'Open Sans';
    font-style:normal;
    font-weight:700;
    src:local('Open Sans Bold'), local('OpenSans-Bold'), format("woff");
    }

    I paid $30 for custom CSS — I expect it to work for everything, not some subset of CSS.

    The blog I need help with is blog.turbovote.org.

  2. WordPress.com is a single install of WordPress Multisite, and as such, we have added security measures which prevent loading outside content. I'm sorry for the trouble. I will check with the developers about Google fonts. In the mean time, if you would prefer a refund because you cannot import outside font files, please let me know and I will take care of that for you.

  3. I just checked Typekit, and they do have Open Sans. That means you can set it up via WordPress.com using the advanced mode for Custom Fonts. Once you've done the setup part, you will be able to add Open Sans into regular font stacks like this:

    h1 {
      font-family: "open-sans",sans-serif;
    }

    Here is how it works:
    http://en.support.wordpress.com/custom-design/custom-fonts/#advanced-mode

    If you need any help getting it set up, let me know.

  4. You're missing the point. What about other non-Typekit fonts? Why are you only allowing some subset of CSS? Why isn't this documented?

  5. If you're going to alter my CSS, you should at the very least put up a WARNING: we detected external URLs in your CSS, which are not allowed. They have been removed. Please look this over carefully blah blah blah.

    Silent data loss = bad.

  6. You're right. These are very good questions and feedback.

    We started the Custom Design feature with Typekit as a partner, and that's why we only offer Typekit fonts at this time. We will consider adding other font sources in the future. We allow most CSS, and as I mentioned before, some is removed for security reasons since WordPress.com is a shared environment. I've added a note to our documentation about that, and I've requested better warnings for CSS that is not allowed inside the editor itself.

    Is there anything else I can do to help you? Feedback like yours is exactly the kind I want to hear because it is a good push and helps to make things better.

  7. This sucks, I just bought the CSS upgrade and can't use external fonts. I would like a refund please.

  8. Certainly. I've removed your Custom Design upgrade and refunded you.

  9. Thank you, appreciate the quick response.

  10. No problem! An I'm sorry you ran into trouble. If you'd like to give Custom Design another try sometime, please contact me!

Topic Closed

This topic has been closed to new replies.

About this Topic