December 29, 2015 Sid No Comments on Font Formats and Browser Compatibility
Font Formats and Browser Compatibility
There are many font formats to choose from but there is not a single format that works on all browsers. Therefore, for a consistent experience, designers will need to use more than one font format.
You may come across these font formats:
- EOT (Embedded Open Type)
- OTF (OpenType)
- TTF (TrueType Font)
- WOFF (Web Open Font Format) and WOFF2
- SVG (Scalable Vector Graphics)
Here’s an infographic by Creative Market that enumerates the different font formats by browser support:
When choosing the right web font to use on your design, here’s a refresher on the basics of each font format and its effect on the designer’s rendering of web fonts.
Embedded Open Type (EOT) fonts are web fonts designed by Microsoft to address the copyright limitations of TTF and OTF. EOT is supposed to be an ideal font format as it has smaller font files due to compression and subsetting. Furthermore, subsetting also allows for copyright protection. However, EOT is only supported by Internet Explorer.
OpenType font (OTF) is an upgraded TTF and the lovechild of Adobe and Microsoft. This font format supports several platforms and expanded character sets, among other various exclusive capabilities. OTF is compatible with Mac and Windows OS and permits storage of up to 65,000 characters, allowing designers to include add-ons and other extras.
TrueType font (TTF) is a joint development of Apple and Microsoft and it is the most common font format for Mac and Windows OS. TTF is supported by all major browsers, except IE8. This font format generally allows for the most basic type of digital rights management – an embeddable flag indicating if the author lets embedding of the font file into PDFs and websites. Like OTF, TTF files are also not compressed and therefore have larger file size.
WOFF and WOFF2
Web Open Font Format (WOFF) is actually OTF or TTF with metadata and compression and is supported by major browsers (except IE8). This font format loads faster because of the compression, and can also have license data within the font file due with the help of metadata. WOFF is developed by Mozilla, Microsoft, and Opera and is recommended by the World Wide Web Consortium, making it the ideal web font and the future of font formats. There is also WOFF2 that has an average of 30% more compression than WOFF. However, WOFF2 is not widely supported as it is just a recommended upgrade.
Scalable Vector Graphics (SVG) font format is only supported by Safari and Safari for iOS. However, text selection is broken on Safari and Safari Mobile, which means if you use SVG, custom selection such as selecting individual characters and words cannot be made on these browsers. You can only select the whole row or paragraph. This is because SVG has the glyph outlines that serve as standard elements and attributes that make them seem like a single vector object in the SVG image.
Here at MicroCreatives, our designers are well-versed on the different font formats and which browsers support them. Collaboration is also instilled in our environment, where designers and developers work together to produce the best quality web design and website that excels not only in user interface, but also in user experience.