If you’ve been designing websites for any amount of time you’ll know that as designers we’re incredibly limited by the list of fonts we’re allowed to use. These fonts are called “web-safe fonts” and their classification comes from their wide-existence on most internet browser’s machines. A few of these fonts are Arial, Tahoma, Verdana, Times New Roman, Trebuchet MS, Georgia & Lucida Sans. It doesn’t take much to exhaust this list.
I read a blog post this morning about a Google project that looks amazing. It’s a very simple solution to respond to the blandness of web fonts. Here are some quick examples of what you can do:
This font is called Lobster
Here is an example of some paragraph text. As you can see this is an attractive font. Better than that, it’s actually HTML text. Go ahead, try and select the text- in fact select the header above and some content below.
Pretty cool huh?
Here’s Another Header, w/ with a Handwriting Font
This one is called Josefin Sans Std Light
At the time of this writing, Google has 18 fonts. These fonts are open source so you can use them in your websites for personal or commercial use.
So how does it work? I won’t get comprehensive details here but it’s very simple. All you need to do is include a link tag that calls out the fonts that you want to use (all the fonts are hosted on Google’s servers):
<link href="http://fonts.googleapis.com/css?family=Lobster|Yanone+Kaffeesatz|Reenie+Beanie|Josefin+Sans+Std+Light" rel="stylesheet" type="text/css">
Once included, you can access the Google fonts with simple CSS
h1 {
font-family: 'Lobster', serif;
font-size: 48px;
}
As you can see, this is very clean. There are a ton of solutions out there that are a wreck to implement. This solution is quick, easy and gets the job done.
It is important to note that you should provide backup fonts in case something goes wrong.
Here are a few helpful links:
The post Web-safe Fonts the Google Way appeared first on Jordan Crown.