Fonts eot, woff, svg and cff used in web - What are They ?
Embedded Open Type (EOT)
It is designed by Microsoft for use as embedded fonts on the web pages, font file uses *.eot extension and are only supported by IE. Embedded fonts discourages copying and there are measures like encryption and decrypting library.
WOFF / WOFF2 - ( Web Open Font Format.)
It was developed by Mozilla with other other organizations, 'woff' fonts are sleath and agile and loads faster compare to other formats as they use compressed version of the structure used by Open Type (OTF) , and True Type (TTF) fonts. WOFF can include metadata and license info with the font file. CSS-Tricks chris coyer says WOFF formats seems to be the winner. It is diffcult to copy and pirate so developer were more inclined in using this fonts.
WOFF 2 is the next generation with better compression.
WOFF 2.0, based on the Brotli compression algorithm and other improvements over WOFF 1.0 giving more than 30 % reduction in file size, is supported in Chrome, Opera, and Firefox.
Link below gives the example, how to use.
TTF and OTF (True Type Fonts and Open Type Fonts)
OTF Used fonts for the cross platform type format that includes expert layout features to provide richer linguistic support and advanced typographic control. Using OT technology you can substitute your characters for different glyphs using many different methods; Ligatures, Small Caps, Oldstyle Figures, Fractions, Superscript/Subscript, Ordinals, Alternates, Titling Characters and many more.
More information of OTF can be found at magnetstudio.
OTF fonts can be easily copied and pirated, so initially WOFF was the answere to security and copy rights of the font and eventually WOFF became favorite among web developers.
Scaleable Vector Graphic (SVG)
Its much lighter and is ideal for mobile use. SVG fonts are no longer supported by FireFox, IE or IE (mobile) (concentrating on WOFF Fonts).
SVGZ is the zip version of SVG.
Points to Consider while using WEB FONTS:
FONTS give impact in performance of the web page. It is important to consider the file size of the font while deciding the font types. We also need to decide the character sets do we really want bold, black weights for one font ? Try to use system fonts for the smaller screens.
Where we get fonts ?
Here are a few hosted font services:
- Cloud Typography
- Google Fonts
- Font Squirrel