I'm using an @font-face kit created by uploading a couple fonts of mine to fontsquirrel. I'm having problems with Safari and Opera, both of which are downloading the SVG font, but not using it for rendering the page. I took a closer look at the default stylesheet.css that comes with the kit, and the SVG font URLs all have an anchor hash appended to their filenames.

url('fonts/megalopolisextra-webfont.svg#webfontgFqFRjPN')

See that the #webfontgFqFRjPN?

I took all these hashes off in the css for my site, and it looks like that's what's causing the problem.

Why?

1 answer

0
points

I am not sure about the hash tags, but what CSS are you using?

If you are using the Bulletproof @font-face syntax...


@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('?'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

... then be sure that your CSS file is using UTF-8 for encoding, so that the Happy Face character is recognized.

Reference: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Answered almost 6 years ago by David Clarke