Search code examples
csssasswebfonts

Css loading font: What does the # in a url mean and how to add a GET-parameter?

I'm using fontawesome with css/scss. The font is embeded in the scss like this:

src: url('#{$fa-font-path}/fa-regular-400.eot');
src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');

To make a preload run correctly on our server, I need to add a GET-parameter (this is due to session-things), so I need to change

fa-regular-400.woff2

to

fa-regular-400.woff2?preload

But what does the # do? In a "normal" URL on a webpage it would be the anchor, but in a font-file? How do I correctly add the preload-parameter to:

fa-regular-400.eot?#iefix
fa-regular-400.svg#fontawesome

Is it:

fa-regular-400.eot?#iefix&preload
fa-regular-400.svg#fontawesome?preload

or

fa-regular-400.eot?preload#iefix
fa-regular-400.svg?preload#fontawesome

??

Solution 
  • fa-regular-400.eot?preload#iefix
fa-regular-400.svg?preload#fontawesome

    this is the correct way. The #part is just a fragments and is usually entirely ignored when parsing HTTP requests. I even suspect most browsers don't even send it to the server.

    You might want to double check fa-regular-400.eot?preload#iefix on older IE versions though (pre IE11), the entire reason for it in the first place is that their CSS parser ignores everything after the ? which we abused to ignore other font formats.

    For the SVG font, the #id is just there to tell the browser which svg element in the file to use as font.