FREE THOUGHT · FREE SOFTWARE · FREE WORLD

Home  »  CSS  »  Google Web Fonts for Programming and Code

by comment

Ok, so on a site like this one, there is a tremendous amount of 'code' that I share styled with CSS fonts and using the pre, code, var, tt, samp, and kbd html tags. When using a program like VIM to view/write the code it will be shown with a beautiful font and even excellent colors. So how then can a website like this be configured in such a way that a program called a 'browser' such as Firefox or Chrome would also show the code beautifully?

Here is a screenshot of my VIM in action. (It only looks this good thanks to my crazy awesome .vimrc)

Screenshot showing Local Code in Vim

So what is the solution? How to enable beautiful code fonts?
Google Web Fonts Logo

Google Web Fonts

Yet another killer free product provided by Google that is basically a font file server, an A+ product! It will serve different versions of a font depending on the user-agent making the request. Brilliant!

Select Fonts

Select Fonts and see Page Speed



You can use the google webfonts wizard to select and add any fonts.
Then grab the code to add them to your site. The webfonts wizard will show you 3 different methods for adding the fonts to your site. I recommend adding it using the <link method the way I am doing it on this site.

3 Options for adding Fonts to Site

Here is the one I use:

<link rel="stylesheet" type="text/css" media="all" href="//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic,800,800italic|Inconsolata|Source+Code+Pro|Droid+Sans+Mono|Droid+Sans:400|Share+Tech+Mono|Ubuntu+Mono:400,400italic,700,700italic|Anonymous+Pro&effect=3d" />

Caveats and Recommendations

  1. Change the href= from https:// to // to prevent mixed ssl warnings.
  2. Add at the top of your <head> above your other css so that the fonts will be available as soon as possible for the page rendering.

CSS for Showing Code

Here are the 2 css rules I use.

kbd, samp, tt, pre, code, var, .code, pre {
    font-family: "Ubuntu Mono","Droid Sans Mono",Inconsolata,Courier,monospace;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    word-wrap: break-word;
}
 
pre {
    background: none repeat scroll 0 0 #F3F5F7;
    border-color: #AAAAAA #AAAAAA #CCCCCC;
    border-image: none;
    border-style: solid;
    border-width: 1px;
    color: #000000;
    letter-spacing: normal;
    margin: 1em auto 2em 0;
    max-width: 97%;
    min-width: 50%;
    overflow: auto;
    padding: 0.5em 0.1em 0.5em 1em;
    text-transform: none;
    white-space: pre-wrap;
    word-spacing: normal;
}

Live Examples

Experiment with different browsers. FYI, the ascii "askapache" in all the below pre elements was created with my free online ascii art tool. Check it out! Also, each of the below examples use inline css to specify the font-family, and the text after Queen and Jack is appended with javascript (just fyi in case you do a view source).

Inconsolata

Grumpy wizards make toxic brew for the evil Queen and Jack

Source Code Pro

Grumpy wizards make toxic brew for the evil Queen and Jack

Droid Sans Mono

Grumpy wizards make toxic brew for the evil Queen and Jack

Share Tech Mono

Grumpy wizards make toxic brew for the evil Queen and Jack

Ubuntu Mono

Grumpy wizards make toxic brew for the evil Queen and Jack

Anonymous Pro

Grumpy wizards make toxic brew for the evil Queen and Jack

Consolas

Grumpy wizards make toxic brew for the evil Queen and Jack

Lucida Console

Grumpy wizards make toxic brew for the evil Queen and Jack

Droid Sans Mono

Grumpy wizards make toxic brew for the evil Queen and Jack

Anonymous Pro

Grumpy wizards make toxic brew for the evil Queen and Jack

BTW, the Grumpy Wizards sentence is called a pangram or a holalphabetic sentence because it contains all the letters of the alphabet. Of course google developers would be that smart to use a pangram for the wizard.

CSS: white-space

The CSS specification defines the white-space property in 16.6 White space.

The white-space property declares how white space inside the element is handled.

Values normal | pre | nowrap | pre-wrap | pre-line | inherit
Initial value normal
Applies to All elements
Inherited Yes
  • normal
    This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.
  • pre
    This value prevents user agents from collapsing sequences of white space. Lines are only broken at newlines in the source, or at occurrences of "\A" in generated content.
  • nowrap
    This value collapses white space as for 'normal', but suppresses line breaks within text.
  • pre-wrap
    This value prevents user agents from collapsing sequences of white space. Lines are broken at newlines in the source, at occurrences of "\A" in generated content, and as necessary to fill line boxes.
  • pre-line
    This value directs user agents to collapse sequences of white space. Lines are broken at newlines in the source, at occurrences of "\A" in generated content, and as necessary to fill line boxes.
  • inherit
    Takes the same specified value as the property for the element's parent.

More Info and Software

Tags

February 6th, 2013

Comments Welcome

Popular Articles
My Online Tools

Related Articles
Newest Posts
Twitter


  • @askapache · Jul 21
    Magic spells for sending thoughts across time? Books
  • @askapache · Jul 20
    TV is just a relic of the previous generation. We just don't know it yet.
  • @askapache · Jul 20
    I will never go back on my ideals, no matter the cost. I'll never let the economic vultures steal my dreams. I'd rather give up the ghost
  • @askapache · Jul 18
    I don't want a better seat, I want control of the engine
  • @askapache · Jul 14
    No matter how good u r, there will always be someone 2x, 5x, 100x better. This is true for me and everyone. No direction but forward.
  • @askapache · Jul 12
    Heads up, I'll DDoS the f out of askapache next week, to see how resilient it really is :) - will try to overflow disk, net, and ip stack
  • RUN GCC! This is a typical shirt I wear, from the  t.co/46LYbFr4k2  shop. A clerk at the LQ recognized it!  t.co/jjmT0dkCPu 
  • Merlin the Magician  t.co/iMmRbanUi4 
  • ROGUE CODE - Latest novel from @markrussinovich  t.co/apkn0LoPIt 
  • RTFM - surprisingly very helpful and way more comprehensive than it looks! @redteamfieldman #pwnAllTheThings  t.co/xiaJ5g0aC9 
  • Dear Hacker - Letters to the Editor of 2600, from Emmanuel Goldstein  t.co/JCfLab7FAJ 
  • The Mythical Man-Month - Essays on Software Engineering, by Frederick P. Brooks, Jr.  t.co/ilWN5GHElr 
  • "where wizards stay up late" - The Origins of the Internet. Favorite book detailing the birth of the net and IMPs  t.co/gY9VTGJgZz 
  • ZERO DAY - read before Trojan horse  t.co/pPMLGDJv8P 
  • Trojan Horse, a novel!  t.co/Hf8EtYaZVa 
  • The Hacker Playbook - very nice high level overview of attacks  t.co/lHwNVWi61u 
  • Clean Code - A Handbook of Agile Software Craftsmanship  t.co/hnJX0x1qIc 
  • Secrets of the JavaScript Ninja - By my absolute favorite JS hacker John Resig!  t.co/tZ42ljmcCl 
  • Hacking Exposed 7: Network Security Secrets & SolutionsMy all time favorite, basic but thorough and accurate.  t.co/jycW0RDVtZ 
  • Empty words will be no surrogate for cold resolve. Pain is nothing.  t.co/qXjpRxbjCw 

Hacking and Hackers

The use of "hacker" to mean "security breaker" is a confusion on the part of the mass media. We hackers refuse to recognize that meaning, and continue using the word to mean someone who loves to program, someone who enjoys playful cleverness, or the combination of the two. See my article, On Hacking.
-- Richard M. Stallman






[hide]

It's very simple - you read the protocol and write the code. -Bill Joy

Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License, just credit with a link.
This site is not supported or endorsed by The Apache Software Foundation (ASF). All software and documentation produced by The ASF is licensed. "Apache" is a trademark of The ASF. NCSA HTTPd.
UNIX ® is a registered Trademark of The Open Group. POSIX ® is a registered Trademark of The IEEE.

| Google+ | askapache

Site Map | Contact Webmaster | License and Disclaimer | Terms of Service

↑ TOPMain