Google vs Self Hosted Fonts

Hi Guys, As we all know that at this time Google fonts are the most preferred fonts for our applications as they are very easy to use in our applications and they have most of the supported fonts.

We can normally use them by including the url in our html or in css file.

@import url('https://fonts.googleapis.com/css?family=Lato');
font-family: 'Lato', sans-serif;                
    

Also they provide a customise option so that we can choose only what is required. In other words it’s one of the best way to use fonts. If there are advantages of google fonts then there are disadvantages too.

Let's have a look at the Advantages of google fonts.

• Easy to implement.
• Free for Commercial Use
• Can Customize the fonts
• No License Required
• Cross Browser Compatibility
• Most popular across the web

But, it also comes with some disadvantages

• Did not provide all the fonts.
• You’ve to wait till the fonts loads properly, till then your application looks distorted as the fonts are not available on your local.
• Font weight looks different in cross browser.
• If you’re using any font in your application and google removes the support for that font then it’s a big issue for your application.

On the other hand, Let’s talk about the Self Hosted Fonts.

Self hosted fonts required a bit more time to use. First you have to download the ttf file, after that you have to convert that file to different formats like woff, eot etc, and that they will include in our css file using @font-face rule.

@font-face {
   font-family: 'latoblack';
   src: url('../fonts/lato/lato-black-webfont.woff2') format('woff2'), url('../fonts/lato/lato-black-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}
@font-face {
   font-family: 'latoregular';
   src: url('../fonts/lato/lato-regular-webfont.woff2') format('woff2'), url('../fonts/lato/lato-regular-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}                
    

One of the best advantage of the Self Hosted fonts is that, even when you are offline your application’s fonts will not distort, as they are already fetched at the time of loading the page.

But at the end, it’s about your comfort level.