Tuesday, November 22, 2011

Customizing blogger html template and cross-site-font hack

Today I set myself a task of moving ordys'es blog to blogger. I knew, that it is not going to be easy and it wasn't.
There are no hints on what is wrong with submitted html - there is just obscure error reference code which does not help identifying an error.
For future reference and for people doing the same thing there are couple of tips:

* Blogger validates if html you pass to it is correct. The layout I was adapting had xhtml strict doctype - html tags that were not closed were causing errors.
* don't remove tag, just it's contents
* if you don't like navbar just set .navbar to display: none in css
* It seems that can't remove any of built in widgets from template (anonymous error again) - remove it in layout editor

Now general advice for people having web fonts in their layout - IE9 and Firefox (and perhaps any future versions of other browsers) rightfully try to protect copyrights of font creators. That is why cross-site-fonts are not allowed unless you add

Access-Control-Allow-Origin



http header to any font file. The other option is to embed base64 encoded font in internal css stylesheet on blogger. I have chosen that second option - the font I intended to use was hosted on heroku and I didn't have easy way to add headers when serving it.
I know, it sounds awful - with every page you download font which in my case adds 50KB to every blog page size. If you want to use this hack you don't need to base64-encode files yourself - I used fontsquirrel's font generator, chosen expert mode and ticked base64 encode.