Google web fonts not rendered in IE8 - html

I have looked at this: Google Web Fonts don't work in IE8, and this: How to make Google Fonts work in IE?. Neither works for me. The first suggests not to import too many fonts at once, while the latter is out of date since the bug was fixed back in 2010.
The HTML is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Font Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Google Fonts Test">
<link type='text/css' href='https://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet'>
<link type='text/css' href='https://fonts.googleapis.com/css?family=Play:700' rel='stylesheet'>
<link type='text/css' href='https://fonts.googleapis.com/css?family=Muli:300' rel='stylesheet'>
<!--<link type='text/css' href='//fonts.googleapis.com/css?family=Lato:900' rel='stylesheet'>-->
<link type="text/css" href="https://static.mysite.com/blah/font-test.css" rel="stylesheet">
</head>
<body>
<div class="page-title">
This Is Title
</div>
<div class="page-content">
This is content
</div>
</body>
</html>
This is the corresponding CSS:
body {
height: 100%;
width: 960px;
min-height: 550px;
max-height: 1080px;
margin: 20px 60px 40px 20px;
padding-left: 10px;
padding-right: 10px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKklEQVQIW2OceOe1cb6K6FkGJAASYwTxkSVhbLAETBJEw3Tjl8BqFC7LAdSSJR3onNbEAAAAAElFTkSuQmCC) repeat;
}
.page-title {
height: 55px;
font: 38px "Play";
}
.page-content {
font: 16px "Cantarell";
width: 630px;
text-align: justify;
}
The above is tested in latest Chrome, which works fine. It however does not work in IE8 for some reason. Anything I am missing?
UPDATE: IE8 simply does NOT work with Google Fonts API. In fact, if I use IE8 to browse the specimen of many fonts on the Google Fonts API pages, none of them renders correctly. The only sure way to use these fonts is to convert them to EOT type (among with WOFF type), and serve them from your server, which is a shame because you cannot use Google's CDN anymore.

I'm confused by the other answers and comments so I'll just throw this out there. Whenever you use data uris, attributes or sets, you are venturing into an area IE does not fair well in by not supporting it or limiting it. Only modern browsers handle them correctly but I'm doing this from my phone and can't go into it any further. Checkout http://caniuse.com/#search=data

It’s not uncommon to have problems with some Google fonts on some browsers especially when used remotely (the way Google recommends). It often helps to download the fonts, generate the font files using e.g. FontSquirrel and then use them as uploaded onto your server.

Related

Firefox scaling issues causes pixelated / blurry borders

github repo with shortest code replicating problem
Basically i have a webpage that i have scaled down using the "viewport" meta tag.
<meta name="viewport" content="width=device-width, initial-scale=0.25">
The issue is that Firefox renders ALL my curved borders really blurry.
If an element has the following CSS applied while being viewed from a Bugzilla mobile browser, the resulting borders are really blurry/pixelated.
.element {
font-size: 40px;
text-align: center;
border: 4px solid black;
border-radius: 40px;
}
#media screen {
.element {
font-size: 4vw;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.25">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="element">
Lorem Ipsum
</div>
</body>
</html>
Screenshot of webpage in Chrome (devtools Mobile browser):
Screenshot of webpage in Firefox (devtools Mobile browser):
From what i've found online it seems Firefox has a long history of scaling based rendering bugs but this is the first time ive seen issues with curved borders.
I think this is what that is related to background bleed and you may probably find its reason in this discussion https://bugzilla.mozilla.org/show_bug.cgi?id=921341
To answer your question which has already been asked in this thread div border radius problem (on firefox and opera)
I recommend you using these properties in your css regarding with the mentioned answer
-moz-background-clip
-webkit-background-clip
background-clip

Google Font has a different appearance in Gmail on Mobile and Desktop than what it really is

Why does google font appear different in Website, Gmail App on Phone and Gmail on desktop? I am using Merienda One font and to my surprise it's not same everywhere. I am sure this would be issue with different fonts or all fonts but let's talk about this one now as a reference as I am using it.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#import url("https://fonts.googleapis.com/css2?family=Merienda+One&display=swap");
.mail-head {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
padding: 10px;
font-family: "Merienda One", cursive;
}
</style>
</head>
<body>
<div class="mail-head">Lovely</div>
</body>
</html>
Actual Font on Google Fonts
On Gmail Desktop
On Gmail Android
I want to fix this. I want the original appearance of the font everywhere. What is the solution?

Transition starting on page load for some reason

Update: when I put the CSS internally, the problem goes away. I went in the dev tools on my chrome and compared what was happening when I reloaded the page. First image is with internal CSS, the second one is with external stylesheet, you can see different results for the background-color property:
Initial post: I have no idea why this is happening, here's a demonstration. Basically, the a takes some time to appear fully on the page.
The time it takes to 'fully' appear is the same duration specified in transition: background 5s; as in 5 seconds.
Here's the same code on another page where the effect is not observed, I also opened it in the same browser.
Here's my code in Visual Studio and in Chrome, the same behavior is observed in Edge but not in Firefox, in Firefox it just loads as it should and the :hover effects work properly. All 3 browsers are updated to their latest versions at the time of writing.
This only happens when I link to an external CSS stylesheet. When I copy the css to the html file the problem goes away!!!
CSS
a {
color: #fff;
border: none;
margin: 20px;
padding: 10px 20px;
display: inline-block;
font: bold 18px sans-serif;
background: #fd7c2a;
text-decoration: none;
-webkit-transition: background 5s; /* For Safari 3.0 to 6.0 */
transition: background 5s; /* For modern browsers */
}
a:hover {
background: #3cc16e;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="" />
<!-- Specifies a description of the page. Search engines can pick up this description to show with the results of searches -->
<meta name="keywords" content="" />
<!-- Specifies a comma-separated list of keywords - relevant to the page -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title></title>
</head>
<body>
<p>Hover on me</p>
</body>
</html>
I solved the issue, been going through google for answers. The solution is to add <script> </script> opening and closing tags in the html file separated by space. Apparently its a bug in the browsers mentioned before.

HTML and CSS resizing on mobile with Codepen, but not after publishing on Github or Bluehost

For some reason, I have a code that is completely identical and it works fine when I test it on codepen, but it will not resize at all when I bring it to github for publishing.
The codepen is: https://codepen.io/daniel-albano/pen/ExaedBr?editors=1100
This is one extract of my CSS not properly resizing:
.mission2 p {
font-size: 1.5vw;
font-family: 'roboto';
padding: 4% 0% 0% 0%;
clear: right;
line-height: 1.4;
}
The actual website is located at: MFASP.com
I honestly have no idea what to look at for the cause of this, as both codes are exactly the same.
So I did a bit of digging and found the solution. I had not been used to using
meta name="viewport" content="width=device-width, initial-scale=1.0"
this tag, but adding it into my html had allowed the browser to resize.
Based on the issue you are having, you need to add a viewport meta tag to your page head. This is most commonly <meta name="viewport" content="width=device-width, initial-scale=1.0">.
So your html would have the Doctype followed by something along the lines of..
<head>
...
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>

Extremely basic media query not working on mobile

This has me stumped. This works fine in browsers (tested Chrome, Firefox, and Safari), but doesn't work in Chrome emulator, Chrome mobile, or Firefox mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta title="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 50%;
float: left;
}
#media screen and (max-width: 500px) {
div {
width: 100%;
}
}
</style>
</head>
<body>
<div>Left</div>
<div>Right</div>
</body>
</html>
My original problem was more complex, but even boiling it down to the simplest form it's not working. Tried the above with different combinations such as display: inline-block; instead of float: left;, different viewport meta tags, adding only screen to the media query, other tags than plain divs, etc.
My original problem surfaced when doing work with Web Components + ShadowDOM, but it doesn't seem to be related to those. Made sure to bust all my caches while testing.
Am I going nuts?
Oh wow I'm dumb. Had a typo in the meta tag. Should be name instead of title:
<meta name="viewport" content="width=device-width, initial-scale=1.0">