Icons: From Bitmap to Vector And Back

by | Jul 6, 2015 | Technology

Problem #2: Failure To Access File

You may also be getting various error codes from the server, or the browser refuses to read a resource because of conflict of protocols. This can happen with web application that use Secure transfer (HTTPS) for web code, but mix in some regular HTTP for resources. While there is virtually no risk in using HTTP to retrieve images and such, browsers are usually very strict about loading other types of resources from unsecured locations. Font files are such resource.

You can try the easy way first. Remove the protocol from the URL which points to your font file, and make it

//yourserver.com/path_to_your_resource/myWebFont.woff

This trick will make the browser fill in the protocol automatically; when HTTPS is used, the browser will fill in “https:”, when you’re using HTTP, it will fill in “http:”. There is an inherent disadvantage to this as well: if, for some reason, you’re testing this on your filesystem, the protocol filled in would be “file:” – which would cause the trick to fail, because downloading via FILE protocol is something browsers just don’t do.

If this didn’t work, it’s time to get ready for some more work. Roll up your sleeves, refill your coffee, and let’s get to it.

Most people tend to forget that URL doesn’t need to be a web location. URL stands for Uniform Resource Locator, which means it can point to virtually any resource you can think of. This is what we’ll abuse in order to get the font file through.

Open your icons-sprite.css file, and find the place where you’re referring to the font files. It should look something like this:

@font-face {
	font-family: 'myWebFont';
	src:url('myWebFont.eot');
	src:url('myWebFont.eot?#iefix') format('embedded-opentype'),
	url('myWebFont.woff') format('woff'),
	url('myWebFont.ttf') format('truetype'),
	url('myWebFont.svg#myWebFont') format('svg');
	font-weight: normal;
	font-style: normal;
}

We’re going to transform the pointer (filename) into the contents of the file. How? Using data URL scheme. A data URL scheme allows you to provide a “virtual” file and feed its contents to the browser directly, rather than just providing a pointer and have the browser download the file.

You will need to define the file’s MIME Type, and obtain a Base64-encoded version of the font file, which you can get in many ways. For simplicity you can use DataURLMaker website’s services. In the end, your font definition should look somewhat like this:

@font-face {
	font-family: 'myWebFont';
	src: url(data:font/woff;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE) format(‘woff’),
	url(‘myWebFont.svg#svgFontName’) format(‘svg’);
}

By feeding the data directly, you will bypass the need for another request, and the browser will be able to access the resource regardless of your mixed URL protocols.

Conclusion

If you combined both improvements, you should now have a solid and nearly bulletproof solution for all your icons. Regardless of how tight your client’s security is, you’ve got it covered. Hope this helps! ;)

Pages: 1 2