0

I made a very simple straight forward bookmarklet to test an open web font we're developing. It works like a charm in Chrome but fails in Firefox, any tips on how can I make it work cross-browser (I'm a real JS novice, mainly copy pasting and then praying it works). Here's the code:

javascript:var%20addFont%3Ddocument.createElement(%22style%22)%3BaddFont.innerText%3D%22%40import%20url(%27https://dl.dropbox.com/u/16808833/webfontkit-20120729-105013/stylesheet.css%27)%3B%20*%7Bfont-family:%20%27OpenfontRegular%27!important%3Bfont-weight:%20normal!important%3B%7D%22%3Bdocument.body.appendChild(addFont)%3B

Or in a more readable format:

javascript:
var addFont=document.createElement('style');
addFont.innerText="
  @import url('https://dl.dropbox.com/u/16808833/webfontkit-20120729-105013/stylesheet.css');
  *{
    font-family: 'OpenfontRegular'!important;
    font-weight: normal!important;
  }";
document.body.appendChild(addFont);
Mushon
  • 61
  • 8

2 Answers2

0

FF will complain about innerText here. Try using innerHTML instead

EDIT 1

Some more information about it - choose what works best for you! 'innerText' works in IE, but not in Firefox

EDIT 2

I've been struggling with this, doesn't make sense to me... So here are some more routes that might yield results:

  1. Try adding the full path to the font files (e.g. https://dl.dropbox.com/...) in the stylesheet
  2. Instead of using import, try adding two elements like so:

var addLink = document.createElement('link');
addLink.rel = "stylesheet";
addLink.type = "text/css";
addLink.href = "https://dl.dropbox.com/u/16808833/webfontkit-20120729-105013/stylesheet.css";
document.head.appendChild(addLink);

var addFont=document.createElement('style');
addFont.innerHTML="* {   font-family: 'OpenfontRegular' !important;    font-weight: normal!important;  }";
document.body.appendChild(addFont);

Neither of these has actually worked for me but might be worth trying. The reason I'm so confused is that this is how googlefonts are added; and they work perfectly in firefox!

Community
  • 1
  • 1
Stuart Burrows
  • 10,824
  • 2
  • 34
  • 33
  • actually innerText worked in Firefox, it is apparently this problem: http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie which might be much more complicated to solve as a bookmarklet :/ – Mushon Aug 01 '12 at 14:21
  • Ah okay, that's weird but cool! Just fyi then it doesn't work on FF 14.0.1 on windows 7 (my setup); it just adds an empty ``. Also MDN has an article about `.textContent` which mentions it and implies it shouldn't work: https://developer.mozilla.org/en/DOM/Node.textContent. If I were you once I'd figured out the main problem (file origin) I'd change it to use `.innerHTML` or `.textContent` – Stuart Burrows Aug 01 '12 at 14:44
  • I think I just solved it using Base64 Encode of the font files in CSS. Now it works in Firefox & Chrome (on OSX at least). Thanks! – Mushon Aug 01 '12 at 15:23
  • the base encoding works for me as well. Still confused as to how this works for googlefonts but not for yours. Anyway, glad its working for you! – Stuart Burrows Aug 01 '12 at 15:33
0

Since Firefox does not allow remote calling of @font-face files I solved this by embedding the font information in the CSS file using Base64 Encode. This is an option provided in the FontSquirrel @font-face generator and it allowed the bookmarklet to import the font. Here's the bookmarklet code that worked cross browser:

javascript:%20newSS%20=%20document.createElement('link');%20newSS.rel%20=%20'stylesheet';%20newSS.href%20=%20'http://dl.dropbox.com/u/2040562/beta0.1/bookmarklet.css';%20document.head.appendChild(newSS);%20void%200

or:

javascript:
newSS = document.createElement('link');
newSS.rel = 'stylesheet'; newSS.href = 'http://dl.dropbox.com/u/2040562/beta0.1/bookmarklet.css';
document.head.appendChild(newSS);
void 0
Mushon
  • 61
  • 8