We are developing a Web App with MVC4 and Jquery Mobile. All works well but we decided to use Google font instead of normal font.
It works well in development in IE browser but when we deployed in Production in public url then users are getting "only secure content is displayed" only in IE browser. Please guide me. Below is my code.
<head>
<title>@ViewBag.Title - Highway905 Mobile App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
This happens because the CDN links for the fonts are not secure, when the browser is expecting them to be. Just change the "http" to "https" so that it looks like this:
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
Edit: While you're at it, you should make just one request for the fonts, by putting all the requests into one URL.
<link href='https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Oswald' rel='stylesheet' type='text/css'>