Using custom fonts in Web Pages!

All these days we were using the standard fonts in our web pages, and it takes up only those fonts which are already available in our system. But now, we can make use of many services to render fonts, which are not installed in the client systems.

One such service is Google Web Fonts. They have a beautiful Google Fonts API, which allows you to hotlink the font files, which renders the desired font online. So, basically what is the way you can use it in your web sites or web pages? Answer is simple. Either use a small JavaScript code or link to an external CSS file! 😀 Through URL parameters, you specificity which fonts you want, and what variations of those fonts.

<head>
   <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Asap:bold,bolditalic|Lacosta:italic|Droid+Sans">
</head>

Here, we have specified three fonts, namely Asap, Lacosta, and Droid Sans. We have an option to also specify the variations like what weights, and styles. By default this renders the normal variant. For Asap, we have specified bold and bold italic versions, for Lacosta, just italic and Droid Sans just the normal font.

You need to specify the parts, which uses the font by giving it in the CSS this way:

<style type="text/css">
    body { font-family: 'Asap', 'Lacosta', 'Droid Sans', serif; font-size: 48px; }
</style>

To do the same thing for advanced users, by inserting a JavaScript code, which is the Google FontLoader. The FontLoader has some advantages over CSS, the main one is the avoiding of FOUT (Flash of Unstyled Text), but has a disadvantage that, if the users have disabled scripting, this method won't work! FontLoader can be used this this way:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">
  WebFont.load({
    google: {
      families: ['Asap']
    }
  });
</script>
<style type="text/css">
  .wf-loading h1 { visibility: hidden; }
  .wf-active h1, .wf-inactive h1 { 
    visibility: visible; font-family: 'Asap'; 
  }
</style>

The FontLoader comes with a small StyleSheet. You can see two styles like .wf-loading and .wf-active. This makes the text to be invisible during the font loading. After the font is loaded, it makes the font visible and this way it prevents FOUT!

Another better way, not to rely on external Google's servers, when you are going to use it inside a private network or offline, you can go with this method. There is a website called <a href="https://www.fontsquirrel.com/" target="_blank" rel="nofollow noopener noreferrer">Free Fonts! Legit Free & Quality » Font Squirrel</a>, which does the same thing as Google Fonts API do. But, the advantage here is, you are allowed (and supposed) to download the fonts and its dependant files to your web server and you SHOULD NOT hotlink files from their servers.

This in turn is helpful, because, all the fonts will be available in your own server and you don't need to rely on Google's server or any other server and another main thing is that you can showcase these in offline, when there is no internet connection! This is not possible via Google Fonts because it relies on the Google's servers online.

You can get @font-facekits downloaded from this website, which is a zip file with the font files, a stylesheet, and a demo HTML file to get started with. The structure of a typical @font-face kit would be this way:

[fontname]-fontfacekit.zip
 |- stylesheet.css
 |- demo.html
 |- license.txt
 |- [fontname]-webfont.eot
 |- [fontname]-webfont.svg
 |- [fontname]-webfont.ttf
 |- [fontname]-webfont.woff

After including stylesheet.css file with your HTML page, you can use the font using font-family CSS attributes. No more restriction to fonts. If you have a custom font, you can use their @font-face kit generator and get the kit and use it as a web font! Cheers!!! 😀