I'm currently working on a chrome extension that allows me to to download the fonts files that have been used on a webpage.
As I was parsing the fonts for this site I ran into a strange edge case for one of the font URLs.
For the font Freddy the @font-face rule looks like this:
@font-face {
font-family: 'Freddy';
src: url("//cdn.shopify.com/s/files/1/0548/8708/8184/t/24/assets/freddy_regular_2-webfont.woff?v=147712666987587936441646682936") format("woff") ,
url("//cdn.shopify.com/s/files/1/0548/8708/8184/t/24/assets/Freddy_Regular_2.ttf?v=64870238297763773461646682938") format("truetype") ,
url("//cdn.shopify.com/s/files/1/0548/8708/8184/t/24/assets/freddy_regular_2-webfont.woff2?v=66678714148373221751646682937") format("woff2"); /* Safari, Android, iOS */}
This broke my script because the double backslash makes it an invalid URL (i.e. if I type it into the browser as is it will give me an error).
So I was wondering — what's the purpose of the double slashes at the beginning of this URL? How does this actually retrieve the font if it seems to be an invalid URL?
When referencing content on another domain, starting a URL with two slashes instead of the http or https protocol tells the browser to request the URL's content using the same protocol as the source page (to prevent mixed content).
These URLs are not meant to be typed into an address bar, which is why they appear to be an invalid URL when you try navigating directly to it.