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

My Online Tools
WordPress Sites

My Picks

Related Articles
Newest Posts
Twitter

  • @askapache · Apr 22
    Within our small sphere of the universe we can look at our past, but only our future is within our control
  • @askapache · Apr 16
    RT @commandlinefu:  t.co/htRbYF8SFf  - Print ASCII Character Chart (AskApache) #echo #column #ascii #for #octal #askapache #chart
  • @askapache · Apr 11
    Angel headed hipsters burning for the ancient heavenly connection to the starry dynamo in the machinery of the night - Ginsberg
  • @askapache · Apr 11
    If you haven't experienced a hacker war on a free shell network like SDF, you haven't lived!
  • @askapache · Apr 10
    @kovshenin @wpekadotcom @CloudFlare Maybe it's an April fools joke that finally propagated
  • @askapache · Apr 10
    @kovshenin @wpekadotcom @CloudFlare wait this is a joke right?
  • 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 
  • REVERSING: Secrets of Reverse Engineering  t.co/GaWo29lWWG 
  • NEUROMANCER  t.co/3OoknUcb5Z 
  • "The Shockwave Rider", by John Brunner (1975 hacker sci-fi)  t.co/ZW56HVUefW 
  • The Rootkit ARSENAL - Escape and Evasion in the Dark Corners of the System  t.co/1FzX6bHgsQ 
  • "We Are Anonymous - Inside the Hacker World of LulzSec, Anonymous, and the Global Cyber Insurgency" better be good!  t.co/GL0cFNiUOq 
  • THE IDEA FACTORY Bell Labs  t.co/FyVhgNwwT5 
  • The Datacenter as a Computer -- Urs Holzle  t.co/M5WIYs1OVg 

Friends and Recommends
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