How to specify a font from javascript?

Question

I am trying to customize a view-src bookmarklet for iPad. This one is looking pretty good so far.

But I want to make it just a little more readable: The Courier (New) font is a bit ugly even (especially?) on the retina display and I'd prefer any one of DejaVu Sans Mono, Monaco, Lucida Console, Bitstream Vera Sans Mono.

I tried to modify the bookmarklet script by adding:

pre.style.fontFamily = '"DejaVu Sans Mono", "Lucida Console", Monaco;';

It's not doing the trick.

Perhaps prettyprint cancels out my fontFamily setting when it loads. Maybe I can set it at the end of the script somehow...

That's right. Turns out none of these great fonts are included, I saw them in some apps I have (like Textastic) but they're not available to MobileSafari. I chose to simply set the Courier to bold so at least it's easier to see the colors. — Steven Lu
– Steven Lu, Commented Apr 1, 2012 at 18:10

meo · Accepted Answer · 2012-04-01 17:32:47Z

3

this is because Lucida Console, dejaVu sans mono and Monaco are no avaiible natively on the ipad. Unless you have added them as Webfont, this will have absolutely no effect on a IOS device. here is a list of the ipad native fonts: http://iosfonts.com/

edited Apr 1, 2012 at 17:32

answered Apr 1, 2012 at 17:15

meo

31.3k20 gold badges90 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Steven Lu Over a year ago

Crap. Which ones of these are monospace?

David Thomas Over a year ago

pre.style.fontFamily = 'mono'; should achieve that.

Steven Lu Over a year ago

@meo I'd love to do a css solution but I don't think that's possible since i'm dealing with a bookmarklet here. i.e. to be able to use this bit of code to view the src on any website I want. So it's all client-side js.

meo Over a year ago

@Steven Lu. ok then go with "Andale Mono" or Courier

Steven Lu Over a year ago

Quite strange. I'm on 5.1 (new iPad) and opening the daringfireball.net link in my ipad shows it using Times to draw Andale Mono. Monaco appears to not be Times but it definitely isn't Monaco either.

|

inspector-g · Accepted Answer · 2012-04-01 17:25:24Z

1

Unfortunately, the only monospace font available on iOS is Courier (and Courier New, I believe). You'll have to go with:
pre.style.fontFamily = '"Courier New", Courier, mono';

answered Apr 1, 2012 at 17:25

inspector-g

4,1862 gold badges26 silver badges33 bronze badges

Comments

Yohann · Accepted Answer · 2012-04-01 17:34:24Z

1

You can use

element.style.fontFamily = "Fontname1,alternative1,alternative2";

About the iPad problem, have you tried Google fonts?

http://www.google.com/webfonts

From their site:

What browsers are supported?

The Google Web Fonts API is compatible with the following browsers:

Google Chrome: version 4.249.4+

Mozilla Firefox: version: 3.5+

Apple Safari: version 3.1+

Opera: version 10.5+

Microsoft Internet Explorer: version 6+

Does the Google Web Fonts API work on mobile devices?

The Google Web Fonts API works reliably on the vast majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod). Support for earlier iOS versions is limited.

answered Apr 1, 2012 at 17:34

Yohann

1362 silver badges13 bronze badges

3 Comments

Steven Lu Over a year ago

Not sure why you got downvoted. Well, google fonts does not have the fonts I like, but this got me searching and maybe I could use @font-face somehow. Or SVG fonts.

Yohann Over a year ago

I'm not sure either. Well @ font-face is great if your project is targeted for css3 browsers only. So if you plan to expand to ie6+ and other browsers older versions its going to be harder, otherwise @ font-face is great. You might also want to read this article (not my blog , just ran into it) on svg fonts. jeremie.patonnier.net/post/2011/02/07/…

Yohann Over a year ago

Oh sorry about that, i looked into the w3.org site, they mention it under css3 w3.org/TR/2002/WD-css3-webfonts-20020802/#font-descriptions Even w3schools.com does w3schools.com/cssref/css3_pr_font-face_rule.asp I think i came across a css2 article on font-face but i guess it was deprecated in css2 and reintroduced in css3. I'm not too sure what the real situation is,but this would be a good thing to know!

Steven Lu · Accepted Answer · 2012-04-01 18:46:34Z

Here is the version I am using now, it's Frank Fiedler's bookmarklet, slightly modified to set the <pre> to bold and using the "sunburst" prettify CSS rather than the default one.

javascript:(function(){
  var w = window.open('about:blank'),
  doc = w.document;
  doc.write('<!DOCTYPE html><html><head><title>Source of ' + location.href +
    '</title><meta name=\'viewport\' content=\'width=device-width\' />' +
    '<link rel=\'stylesheet\''+
    ' href=\'http://google-code-prettify.googlecode.com/svn/trunk/styles/sunburst.css\''+
    ' type=\'text/css\'/>' +
    '</head><body></body></html>');
  doc.close();
  var pre = doc.body.appendChild(doc.createElement('pre'));
  pre.style.overflow = 'auto';
  pre.style.whiteSpace = 'pre-wrap';
  pre.style.border = 'none';
  pre.style.fontWeight = 'bold';
  pre.className = 'prettyprint';
  pre.appendChild(doc.createTextNode(document.documentElement.innerHTML));
  var lib = doc.createElement('script');
  lib.setAttribute('type','text/javascript');
  lib.setAttribute('src','http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js');
  doc.getElementsByTagName('head')[0].appendChild(lib);
  var call = doc.createElement('script');
  call.setAttribute('type','text/javascript');
  var txt = doc.createTextNode('window.setTimeout(function () {prettyPrint();},800);');
  call.appendChild(txt);
  doc.body.appendChild(call);  
}());

looks pretty pro:

enter image description here

Collectives™ on Stack Overflow

How to specify a font from javascript?

4 Answers 4

12 Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

12 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related