Search code examples
urlfont-facewebfonts

Could URL structure break a webfont?

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.

Solution

  • 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.