@Font-Face Svg Not Working Properly in Chrome

@font-face svg not working properly in Chrome?

To get webfonts to render with good antialias in Chrome on Windows, you need to use this format in the font declaration:

@font-face {
    font-family: 'Futura';
    src: url('futura.eot');
    src: url('futura.eot?#iefix') format('embedded-opentype'),
         url('futura.woff') format('woff'),
         url('futura.ttf') format('truetype'),
         url('futura.svg#futura') format('svg');

    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'Futura';
        src: url('futura.svg#futura') format('svg');
    }
}

Basically, you need to force Chrome to use the SVG font format. You can do this by moving the url for the .svg version to the top, however Chrome on Windows has had problems with messing up the layout when doing this (up to and including version 30). By overriding the font declaration using a media query, these issues are solved.

Also: Sometimes the baseline position doesn't match between OpenType fonts and SVG fonts but you can adjust this by simply editing the SVG font files. SVG fonts are xml based and if you look at the declaration

<font-face units-per-em="2048" ascent="1900" descent="-510" />

You can change the value for ascent and get it to match the other font format versions.

Font in an SVG sometimes doesn't load in Chrome

Your SVG is not using any font other than the default browser font (normally Times New Roman). That's because the SVG is not specifying a different font.

You may be thinking that the following in the SVG is changing the font:

<style type="text/css">
  @font-face {
    font-family: "Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif";
  }
</style>

But this is doing nothing. It should be something like:

#logo {
  font-family: "Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif";
}

But even if you do that, the only users that will be seeing "Garamond", "Baskerville", "Baskerville Old Face" or "Hoefler Text", will be users that have those fonts installed on their computer. You may be seeing Garamond (if you have that font installed), but most people will still just be seeing Times New Roman or whatever they have their default font set to.

If you want to use another font, then you would need to fix your @font-face
declaration and use Data URIs to embed your font in the SVG.

But there is a much better solution to this problem however. And that is to convert your text to outlines (paths). Then all your font worries disappear, and you are guaranteed to have the correct representation of your logo font, in everybody's browser.

Chrome not rendering svg for fonts when hash included

As suggested by @cinnamon, it seems to be the Chrome team deciding that you should not be able to traverse an SVG: https://code.google.com/p/chromium/issues/detail?id=128055#c6

@Cinnamon has more info here: https://stackoverflow.com/a/16042903/857025

Mobile Firefox and Chrome not recognizing @font-face

This seems like a duplicate from: @font-face Not Working in Chrome for Android

The problem may be related to your font-family declaration (I can't tell because you haven't posted that part). If, for example, you had this:

font-family: fghjkjh, 'jump_startregular', sans-serif;

...Chrome for Android would simply pretend that fghjkjh is installed (but really use the default Android font) and ignore everything else. (Not sure if this is a bug or a feature.)

In which case, the solution is to move 'jump_startregular' to the front - and possibly add a local source to the @font-face block instead, which probably causes problems with other older browsers.

"Taken word for word from the link mention above"

If this doesn't work, I suggest you use google fonts instead.

Font Face is not working except on Chrome

Try having to format as opentype. Your using an Open Type font so you need to specify which format to use.

@font-face{
    font-family: 'Lufga';
    src: url("../styles/Lufga-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
}

---

Related Topics