Google Fonts not rendering correctly in IE 11

Problem

Google fonts provide a rich group of both unlicensed and licenced fonts ready for download and customization.  These fonts are used extensively throughout the web.


Their usage is simple, add the fonts header in your html code as follows:


<link href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,700,500italic,500,700italic,900,900italic" rel="stylesheet" type="text/css"></link>


However, if you use IE 11, while the base font (Roboto) is downloaded, the bold weight and italic modifiers do not work.  So your site will look different in IE 11 than any other current browser.

Solution

It turns out that IE11 has a problem downloading everything after the first designation in the font family, so "Roboto:400" is downloaded in the above link, but everything else is missed.  The solution is to call each variation separately so that all components are downloaded, such as follows:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100italic" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300italic" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400italic" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:700" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:500italic" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:700italic" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:900" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:900italic" />


I put both calls in the html head of the code as it seems to work best that way. Hopefully this will save you some time looking for the solution yourself.