Font in svg logo (on mobile) not working

[Wous]

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:
http://tweehuijsenwebdesign.nl/test/

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:
https://goo.gl/YpsHsU

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!

[Wous]

Hi,

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!

[Author]

Posts