Using Google font locally (offline)

Google font is an online tools that provide an API to customized and used different kinds of web font on a website. The font is tested in various browsers and there is assurance that those font provided will work on  on all browsers across different display system. It is very easy to customized your desired font and apply it straight to your website with ease. For the fact that the font is customized, it does not slow down website and is reliable because it was developed and maintained by Google. Another benefit of this Google font is the fact that it can be used locally during a website development on local server.
Using Google font locally means that the various font provided by this Google tools will work on the web page even when the computer is not connected to internet. Before you continue to make sure you under css 3 @font face selector rules. This allow a customized font such as Google font to be loaded on a web page.
The first step  is to understand how Google font works. Before getting it to works on a local computer or offline browser one should have the knowledge that the tools allows you to download a particular font on and embedded it to the targeted web page and get it to work using css @font face rule. The process of doing all these is what I will discuss with you on the next paragraph.
Go to font.google.com and you will see list of web site font that you can actually get it work on your own website. Right now there are about 815 font available for you all for free. There are several way you can actually customized it by changing  the size, bold and so on. And you can actually check the font on alphabet, numerals, paragraph to see how it styles computer characters.

Once you have found the font that you actually likes, click on the plus (+) button attached to the font  tray that automatically show at the bottom of the page with a label of one and family selected. Click on the label, once the tray opens up, you should see a downloaded icon at the left hand side of the page click on it to download.

Now that you have download it, unzip and save it to your website project folder. Then write the following code on your css file

@font-face {
  font-family: 'myfont';
  src: url('Reem_Kufi/ReemKufi-Regular.ttf' );
}
The code above change the name of the font to myfont for references purpose if you understand how @font-face work that should not be an issue and src::url() will link to the location of the folder of the font, the name and format of the font.
Select a tag with which you want to apply the font to and style using the name given to the font.
a {
  font-family: myfont;
  color: #1FB57B;
}
This is exactly how to get google font working on your local machine and if you have any issues or complain do let me know at the comment box and be aware that when you are developing using internet connection i recommend embedding the font directly from google website.