TTF/OTF Conversion in CSS

Gaurav Katara
Mar 25, 2015
6.2k
0
0
Article

There are several font formats available for the various operating systems. Among these font formats the TTF and OTF are the most popular.

True Type Font (TTF)

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).

Open Type Format (OTF)

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.

Need of Webfont

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 convertor.
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 in the webpage.