Is the hash necessary in svg font-face declarations?

user463231 picture user463231 · Sep 17, 2012 · Viewed 7.5k times · Source
@font-face
  font-family: 'AllerRegular'
  src: url('/fonts/aller/aller_rg-webfont.eot')
  src: url('/fonts/aller/aller_rg-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/aller/aller_rg-webfont.woff') format('woff'), url('/fonts/aller/aller_rg-webfont.ttf') format('truetype'), url('/fonts/aller/aller_rg-webfont.svg#AllerRegular') format('svg')
  font-weight: normal
  font-style: normal

In the example above, I'm adding an svg version of this font but I'm not sure the ID is correct. If there is only one font included in this SVG is it necessary to have the correct id?

Answer

Chris picture Chris · Sep 17, 2012

Yes, it is required. This article says:

In the CSS code above, you can actually see that the SVG version needs an extra info, its ID, after the hashtag (#) in the file name declaration. If you don’t fill it it’s not working, so you need to find this information opening the SVG file in a TXT document or notepad and look for the following line, near the top of page.

And this one says:

With SVG fonts, they also need a #hashtag;

The hashtag is simply a pointer to the ID of the font defined inside the SVG. If you don't include it, the whole SVG file will be loaded, including SVG headers that prevent the font from being recognized.