Zohaib Saleem

Web Engineer

These days, pretty much all websites take advantage of external css file to manage look/feel of the html pages. Doing so allows you to change look/feel of all pages by simply modifying just one file, usually called stylesheet.css. However getting fonts to look the same on different devices/OS isn't as simple because different computers/smartphones have different sets of fonts. To overcome this and ensure that all of your visitors view your site with the same font no matter what OS is used, you need to use what's called Web Fonts. You can host it yourself or use ones hosted by other providers, but I prefer Google Web Fonts (free too).

In this post, I will show you how to create a html file, a css file, tell the html file to use css file, and then modify the css file to use Google Web fonts. It's pretty simple. When I started working on this solution, I couldn't find a straight forward tutorial online. So after I figured it out, I decided to post my notes here. For this tutorial you can create both the html file and CSS file on your PC’s internal HD, like in Documents folder. You should create both files with a text editor like Notepad (Windows), Sublime (Mac) or Textmate (Mac). Do NOT use Microsoft Word or TextEdit (Mac).