Introduction
There are several font formats available for the various operating systems. Among these font formats, the TTF and OTF are the most popular.
The TrueType font format has been supported internally on both Mac and Windows operating systems for some time now. No external software is required. TrueType fonts exist as separate structures of information called tables. Each table contains a specific type of information for a font. All the information (outlines, kerning, widths, and so on) related to a TrueType font is contained in one file. It can also contain information specific to each platform it supports (encoding tables, names in various languages, and so on).
OpenType is a format for scalable computer fonts. It was built on its predecessor TTF, retaining TrueType's basic structure and adding many intricate data structures for prescribing typography behavior. OpenType is a registered trademark of Microsoft Corporation.
Webfonts are a font format with a specific license that permits web designers and developers to use real typography online without losing the advantages of live text, dynamic, searchable and accessible content.
Actually, if we don't embed a Webfont in our CSS, then there are certain consequences related to our HTML page as if the font we have used in our HTML is not present at the user machine then it will not show the text in their proper format and it will lead to a webpage in a disordered format.
So, we need to provide certain fonts by embedding them into the CSS of the webpage. So it will be available to all the users accessing our page.
Procedure to use a Webfont in CSS
- Generate the desired Webfont for the webpage using any online converter.
- Copy the CSS file, .eot file, .woff file and so on to the CSS folder.
- Link the CSS with the webpage.
- Use the name of the font for applying the Webfont to the element on the webpage.
Advantages of Webfonts
- A consistent look and feel can be achieved.
- No need to create jpg images of your headlines as was needed to be done in the past.
In this article, we studied TTF/OTF Conversion in CSS.