Could URL structure break a webfont?

Question

Is there any difference between these two structures?

With http://

@font-face {
    font-family: 'nexa-boldregular';
    src: url('http://example.com/fonts/nexa_bold_webfont.eot');
    src: url('http://example.com/fonts/nexa_bold_webfont.eot?#iefix') format('embedded-opentype'), url('http://example.com/fonts//nexa_bold_webfont.woff') format('woff'), url('http://example.com/fonts//nexa_bold_webfont.ttf') format('truetype'), url('http://example.com/fonts//nexa_bold_webfont.svg#nexa_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Without http://

@font-face {
    font-family: 'nexa-boldregular';
    src: url('//example.com/fonts/nexa_bold_webfont.eot');
    src: url('//example.com/fonts/nexa_bold_webfont.eot?#iefix') format('embedded-opentype'), url('//example.com/fonts//nexa_bold_webfont.woff') format('woff'), url('//example.com/fonts//nexa_bold_webfont.ttf') format('truetype'), url('//example.com/fonts//nexa_bold_webfont.svg#nexa_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

If so, please explain.

Also: it appears from my testing that Chrome can read either one of these structures but Firefox cannot.

score 0 · Accepted Answer · answered Apr 10 '14 at 17:34

0

The // form without http: is called a protocol (or scheme) relative URL.

If the link starting with // is added to an http page (or css file fetched via http), the font will be fetched via http, while if the link is added to a https page, the font will also automatically be fetched via https.

answered Apr 10 '14 at 17:34

Joachim Isaksson

176,943
25
281
294

That's a good answer - thanks. I figured out the real issue over the weekend. It turns out IE and Firefox hang on cross-domain requests, while webkit does not. – serraosays Apr 14 '14 at 13:32

Could URL structure break a webfont?

1 Answers1