How to Add Different Fonts on a Web Site

In today’s web environment you have a great number of options when it comes to technologies to use, images to show, animation to run, navigation to launch, as well as many different frameworks to implement but one area that has always been fairly limited is in different fonts.  For the most part you have just a few (relatively speaking) to pick from.  You can look at sites like ampsite, MIT, webDesigndev and many others and you will find that you have about 16 fonts or so.  This has always bothered me.  You want to provide the user with a unique experience which should include fonts that are tailored to your site design.  You can create a wide range of graphics text but these are neither scalable nor search engine optimized.

This is where the idea of web fonts come in.  What are web fonts?  Web fonts are fonts that are open source (can be used without prior permission) and they can be used in most browsers.  If you have never used them then let me share with you some ideas to consider.

  • Always use a “fall-back” font that is considered safe. (Use from the site above)
  • If your site is international then you need to consider the impact of using a web font that is considered an “American” font.
  • If you use a web font and Google or your hosting font file goes down then you need to provide a backup font otherwise unexpected results will occur.
  • Using a web font will slightly slow down the page on loading (Although this is small).
  • At the end of your font styles add a safe font.
  • Using a font always the text to be used in web searches (unlike graphic text)

The hardest part is determining which font to use.  It can take you a lot of time to find the perfect font to use.  Always keep in mind to use a “fall back” safe font.

  1. Go to Google’s Web Font site.
  2. Find your web and add to collection
  3. When you are done click on the ‘Use’
  4. Google will take you to the page which shows you how to add it to your style sheet.

NOTE: Keep a close eye on the “tachometer” gauge on the right side.  You should keep this as low as possible.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , | Posted under 3rd Party Software, Programming/Coding | RSS 2.0

Author Spotlight

David Bauernschmidt

David Bauernschmidt

I live in the historical triangle of Virginia where I am married with two daughters. I have spent over 13 years working for a Fortune 500 company in the computer area. I started in VB 6.0 and by the time I ended my employment I was supervising a development team where we built many web applications. When my first daughter was born I wanted to spend more time with her so I left and became a programmer analyst for local government as well as launch my own company. Since then I have grown James River Webs into a profitable web design and application company helping small businesses create a big presence on the internet. As an employee I have created web application used by citizens and other companies. I enjoy fly fishing, and spending time with my family. I also enjoy learning new approaches and development tools when it comes to developing applications.

Leave a Reply

Your email address will not be published. Required fields are marked *


7 − 3 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>