Websites with default fonts such as Arial, Verdana, or Taoma are called outdated in today's era. To build a professional and beautiful website you need to integrate some stylish fonts. The best way to display custom fonts that will not disrupt SEO, JavaScript, CSS and HTML is the integration of the Web Font Kit. And they are very less in size like 40kb per one font (both woff and woff2). It is quite easy but you need to remember a few things. So let's start with how to integrate them.
Preparation
First of all you need to collect the .ttf file of the font to be used in your projects. Google Fonts is the perfect source for free fonts as well as some others such as 1001Fonts, DaFont and fontsquirrel. Just Googling "free fonts" and believe me you will found lots of free fonts.Just search "free fonts" in Google and believe me you will find lots of free fonts.
Remove unwanted letters and hints.
You need a software to edit the .ttf files. In this criteria, Font Forge is the best option and it is also free. Open the font in the software and delete the unwanted letters and hints. Hints are also important to be removed. Because different fonts have different hints and it will show upper lower in websites in the same line height.
To know more watch this video : Create compressed web font kit to integrate in Website.
Make your Web Font Kit.
After preparing the compressed .ttf file you are ready to create your Web Font Kit. Just open the Font Squirrel Web Font Generator and upload your .ttf file. Choose Expert and for Font Formats select only woff and woff2 which is default. Web Open Font Format and Web Open Font Format version 2.0 files are much smaller in size than other formats and are compatible in all modern browsers. It renders the accurate characters if you have perfectly cleaned the predefined hints. Just check the video mentioned above. In True Type Hinting of Font Squirrel Generator choose TTFAutohint and leave the rest options as it is. You can remove Font Name Suffix which by default is -webfont in Advanced Options because it is not necessary. Then tick the Agreement and Download Your Kit. That's it… Font Squirrel will generate every thing you need to integrate a Web Font in website.
Things to Remember.
Remove unwanted characters from your font and make them smaller (approx 20kb-30kb) otherwise it will become very large files which can make your website slowdown.
Don't use too many Web Fonts because the same prob as above it can break down your website loading speed due to over size. And another thing is too many Web Fonts means too many HTTP Requests which is a major cause to make your website slowdown.
Clean properly the Hints of .ttf font file before making the KIT. So that you can display multi fonts together in a same line (no upper lower) with a same line height.
Only choose woff and woff2 files to render fonts. These both are enough to display custom fonts in browsers. The woff2 file is for all modern browsers and woff is for old browsers like IE9.
That's all for this post. Start making your custom Web Font Kits.
