Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

CSS editor is stripping web fonts

  1. paulschreiber
    Member

    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. designsimply
    Happiness Engineer

    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. designsimply
    Happiness Engineer

    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. paulschreiber
    Member

    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. paulschreiber
    Member

    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. designsimply
    Happiness Engineer

    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. 90kts
    Member

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

  8. designsimply
    Happiness Engineer

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

  9. 90kts
    Member

    Thank you, appreciate the quick response.

  10. designsimply
    Happiness Engineer

    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

Tags