The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Font in svg logo (on mobile) not working

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #206319

    Hi all,

    I hope somebody will be able to help me on this:
    I’ve made a logo with Illustrator and saved it as an svg-file and uploaded it to my website. It consists of an image with a piece of text (company name) in a specific font.
    But that font just won’t display properly on a mobile device. I know this sometimes happens with fonts in regular text and upload the font to the site’s server and calling the @font-face in CSS will do the trick. But I just can’t seem to get it to work with this logo.

    I’ve read a couple of “solutions” for this here and there, but I guess I’m not doing it quite right so hopefully somebody is able to help me fix this.

    This is where the logo is at:

    If you look at this on a desktop/laptop, it’s all fine. But opening the link on a phone or tablet, you’ll notice the font is different (cut off even). Screenshot from my phone:

    I have uploaded all the font files, including an .svg webfont-version, to my server and have put this in my css:

    @font-face {
        font-family: 'onyx';
        src: url('/wp-includes/fonts/onyx/onyx-webfont.eot');
        src: url('/wp-includes/fonts/onyx/onyx-webfont.eot?#iefix') format('embedded-opentype'),
             url('/wp-includes/fonts/onyx/onyx-webfont.woff2') format('woff2'),
             url('/wp-includes/fonts/onyx/onyx-webfont.woff') format('woff'),
             url('/wp-includes/fonts/onyx/onyx-webfont.ttf') format('truetype'),
             url('/wp-includes/fonts/onyx/onyx-webfont.svg#onyx') format('svg');
        font-weight: normal;
        font-style: normal;

    Perhaps I’m completely wrong, but hopefully somebody can help me forward.




    Thanks for your quick reply.
    Saving the svg and selecting text to outlines has indeed done the trick.
    Why didn’t I think of that any time sooner? :)

    Thanks again!

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.