Cross Browser Typography Compatibility Testing

What are the font format choices you have?

You’ll find a wide choice of font formats while designing your website. The various file extensions that you’ll come across include:

Out of all these formats, the most common ones are EOT, OTF, TTF, WOFF, SVG. So, I’ll focus around the compatibility of these formats.

EOT (Embedded Open Type Font)

EOT font type font was discovered by Microsoft 15 years back. This font format is supported on only Internet explorer.

TTF( TrueType Font)

TTF was developed by Apple and Microsoft late in 1980s. It is the most common font format for both Windows and Macintosh operating systems.

OTF(OpenType Font)

An evolution of TTF, OTF is developed by combined efforts of Adobe and Microsoft. Supported in Mac and Windows OS OTF provides support for various platforms and has expanded character sets. It support is same for browsers as of TTF.

WOFF( Web OpenFont Format)

As the name suggests, WOFF is an essential font format for web pages. The major feature that WOFF provides is fast loading web pages since it uses the compressed versions of TTF and OTF fonts. Developed by Mozilla in 2009, WOFF is now a W3C recommendation.

The upgraded version of WOFF, WOFF2 has support for different browser sets:

SVG(Scalable Vector Graphics Font)

SVG fonts files contain the glyph outlines which are generally represented as standard SVG elements and attributes, just like they were single vector objects in the SVG image. These files have pretty large size and are uncompressed unlike EOT, WOFF.

How To Avoid Browser Font Incompatibility?

Knowing which browsers support a font family is one thing and making them support is another. So to make sure that your font family is rendered properly in every browser even if the user doesn’t have the font family installed on his local computer is to use @font-face in CSS style.

Addition of @font-face allows a webpage to download the font from the hosted location and display it in the CSS as specified.

Add the code to use stylesheet before any styles:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Once you make sure to add the above code, you can use it to style elements like this:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

If you want to style a heading, this code format can be used:

h1 {
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

You can see a working example of how you can use it on w3schools.

Using a bold font:

@font-face {
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight: bold;
}

This might help you make support font formats in all browsers.

Fixed? Now It’s Time For Some Cross Browser Testing.

Having made sure that your browsers render all the fonts properly in all browsers you need to test them if it is fixed or not. For this, you need to test your website for cross browser compatibility.

Now with TestMu AI, You can perform cross browser testing on various mobile devices such as test on MotoG 2nd and test on Xperia Tipo 4.

Font rendering is a part of visual appeal. You can use TestMu AI’s Visual UI testing feature to test visual appearance of your website. Take screenshots on various browsers and compare them if they look the same.

So, it’s time you checked your website if the fonts render properly for your users too or it just looks perfect for you.