Tuesday, August 14, 2012

Blogger Template Edit HTML Font Fixup

On occasion I update the HTML of my blog using bloggers built in editor and it displays using something resembling Times New Roman. It is a terrible font to view code with. I tried to see what errors were occurring and FireBug didn't reveal anything. After some digging, I openned Venkman and discovered this little gem:
Error: downloadable font: download not allowed (font-family: "Open Sans" style:normal weight:normal stretch:normal src index:1): content blocked
source: http://themes.googleusercontent.com/static/fonts/opensans/v5/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff
Source Code:
@font-face {   font-family: "Open Sans";   font-style: normal;   font-weight: normal;   src: local("Open Sans"), url("//themes.googleusercontent.com/static/fonts/opensans/v5/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff") format("woff"); }
I felt like i was hot on the trail. After a while googling and not finding any good way to fix it, I created the following GreaseMonkey script.
// ==UserScript==
// @name        Blogger Template Edit HTML Fixup
// @description Script that fixes the HTML template editor dialog's text area.  monospace font unavailable, defaulting to consolas.  Firefox gives me: Error: downloadable font: download not allowed (font-family: "Open Sans" style:normal weight:normal stretch:normal src index:1): content blocked.
// @namespace   net.intellectualponderings.BloggerTemplateEditHTMLFixup
// @include     http://draft.blogger.com/*
// @include     https://draft.blogger.com/*
// @grant       GM_addStyle
// @grant       GM_getValue
// @grant       GM_setValue
// @version     1
// ==/UserScript==

(function () {
  var cssTemplateEditHTMLFixFont = (<>).toString();
  
  //Initial Styles
  GM_addStyle( cssTemplateEditHTMLFixFont );
})();

UPDATE 2012-09-04: Added the @grant statements in the header to make the scripts work with GreaseMonkey 1.0.

No comments: