Add online fonts using @font-face

In this tutorial, we will use a font file, OpenSans-Regular.ttf, downloaded from Google Web Fonts as an example. You can use your own font but be sure to check out the copyright of it to make sure you are allowed to distribute it through web. This is required because when the page is opened in your visitors' browsers, the font file will be downloaded to their computers.