I am using Google Fonts to load two fonts. Since they look absolutely horrible in anything below ie9 I want to disregard them. Here is what I am thinking :
<!DOCTYPE html>
<!--[if lte IE 8 ]> <html class="ie8" lang="en-US"> <![endif]-->
<!--[if !IE]><!--><html lang="en-US"><!--<![endif]-->
then in my css I could use something like this :
h1{
font: normal 33px/50px 'Open Sans', 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}
.ie8 h1{
font: normal 33px/50px 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}
That takes care of it trying to use Open Sans. What about loading the actual stylesheet. Would something like this be fine?
<!--[if !(lte IE 8) ]>
<link href="http://fonts.googleapis.com/css?family=Kite+One|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<![endif]-->
This would prevent ie8 and under from even loading the css and prevent wasted download - correct? Is this the correct syntax?
Anyone recommend a better way? I have tried loading all the fonts separate and they still do not work right in ie8 and 7 so that is not an option.
You'd have to use something like this to exclude IE8 and lower:
<!--[if gt IE 8]>
<link href="http://fonts.googleapis.com/css?family=Kite+One|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if !IE]> -->
<link href="http://fonts.googleapis.com/css?family=Kite+One|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<!-- <![endif]-->
The first one only loads the font for IE9 and above. The second one loads it for all non-IE browsers.
Alternatively, you could load the fonts with JavaScript.
Related
I am trying to use a custom font in a newsletter/html email. I got the #font-face import working in safari, firefox and chrome, but as soon as I try to use it in an email client (tested with apple mail, thunderbird and gmail) the custom font is not displayed. I read several posts on SO about this but the suggested solution is always to check if the mail-client is supported (which it is) and to use different formats(which I do). It is not working with google fonts either. So are there any other suggestions what could be wrong?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="x-apple-disable-message-reformatting">
<!--[if !mso]><!-->
<style type="text/css">
#font-face {
font-family: 'myfont';
src: url('https://example.com/various/myfont-Regular.eot');
src: url('https://example.com/various/myfont-Regular.woff2') format('woff2'),
url('https://example.com/various/myfont-Regular.woff') format('woff'),
url('https://example.com/various/myfont-Regular.ttf') format('truetype'),
url('https://example.com/various/myfont-Regular.svg#FreelandforDouglas-Regular') format('svg'),
url('https://example.com/various/myfont-Regular.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
</style>
<!--<![endif]-->
</head>
As you mention, #font-face is not supported in some email clients. Depending on what fonts you're designing with, you could specify a font-stack the starts with a custom font and falls back to similar system fonts.
This code I use for web fonts goes something like this:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet'>
<!--<![endif]-->
There are a few ways to reference web fonts in email, I prefer using the <link> method.
Alternatively you can run your font through Font Squirrel's Font Generator and use the #import method:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!--[if !mso]><!-->
<style>
#font-face {
font-family: 'MyWebFont';
src: url('http://www.website.com/webfont.eot');
src: url('http://www.website.com/webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.website.com/webfont.woff2') format('woff2'),
url('http://www.website.com/webfont.woff') format('woff'),
url('http://www.website.com/webfont.ttf') format('truetype'),
url('http://www.website.com/webfont.svg#svgFontName') format('svg');
}
</style>
<!--<![endif]-->
You might not need all of these font formats (eg. you probably don't need the SVG format), I'd recommend testing.
I want to use Lato light google font on my website.
Added link herf=... and font family tag per instruction, but it's not working properly.
On my laptop where I have Lato fonts installed, I see Lato light font implemented; however, on my friend's computer as well as on my phone, I'm not seeing Lato light font (I see some random font instead)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
body {
font-family: 'Lato', sans-serif;
background-color: white;
font-weight: 300;
color: #595959;
letter-spacing: 1.4px;
}
I don't know what the problem is -- when I delete font-family: 'Lato', sans-serif; below body {, I no longer see Lato font on my computer.... so it's working, but quite properly.
Input would be greatly appreciated!!!
Try to this way, I think this is working very well
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
It's working fine with right html declarations. And you can use updated lato font link
body {
font-family: 'Lato', sans-serif;
background-color: white;
font-weight: 300;
color: #595959;
letter-spacing: 1.4px;
}
<!Doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<body>
<p>I am paragraph</p>
</body>
</html>
IE 11 is not displaying my specified font weights correctly from Google Fonts. I can not get the problem to replicate in JSFiddle
When using Google Fonts the font weight is displayed correctly if I only specify one weight i.e. if I import the fonts with the following link the light version is brought in.
<link href="https://fonts.googleapis.com/css?family=Oswald:300" rel="stylesheet">
If change the link like so:
<link href="https://fonts.googleapis.com/css?family=Oswald:400" rel="stylesheet">
The regular weight is brought in.
However if I try to import both weights IE 11 only shows the heavier font despite me specifying font weight in the CSS. Chrome shows the light version as it should.
Link:
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
CSS:
.light {
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 16px;
}
.regular {
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 16px;
}
HTML:
<p class="light">This Is A Test Of Google Fonts Displayed in IE 11</p>
<p class="regular">This Is A Test Of Google Fonts Displayed in IE 11</p>
Chrome Screenshot:
IE Screenshot:
Full Local HTML for Test case:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Font Test Page</title>
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<style>
.light {
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 16px;
}
.regular {
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 16px;
}
</style>
</head>
<body>
<p class="light">This Is A Test Of Google Fonts Displayed in IE 11
</p>
<p class="regular">This Is A Test Of Google Fonts Displayed in IE 11
</p>
</body>
</html>
According to Can I Use... Internet explorer 6-11 doesn't support the font-weight:<number> syntax:
(source: https://caniuse.com/#feat=mdn-css_properties_font-weight_number )
A solution for that browser would be to have differently named font definitions for all the needed weights.
I have a webpage that uses Google's Open Sans font. The webpage also uses an HTML entity for the trademark symbol (™).
In Internet Explorer 7, this entity is not displayed using Open Sans, it is displayed in a serif font:
Here is a short page that reproduces the problem:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:700" />
<![endif]-->
<style type="text/css">
* {
font-family: "Open Sans", Arial, sans-serif;
}
</style>
</head>
<body>
<h1>This is trademarked™</h1>
<p>This is trademarked™</p>
</body>
</html>
Using the entity ™ results in the same problem, as does using a literal ™, but oddly enough the ® entity displays correctly.
Is there anyway to get this entity to render either in Open Sans, or if that fails, in a sans-serif font?
Both Open Sans & Arial don't have entities, so your browser will default to a system font for them. Try adding some alternative system fonts in your lineup:
font-family: "Open Sans", "Helvetica Neue", Helvetica, Calibri, Arial Unicode MS, Lucida Sans Unicode, DejaVu Sans, FreeSans, sans-serif;
I just installed the fonts Aller Regular and Aller bold on my site via #font-face (generated by fontsquirrel.com).
Here is the CSS:
#font-face {
font-family: 'AllerRegular';
src: url('library/fonts/aller_rg-webfont.eot');
src: url('library/fonts/aller_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/aller_rg-webfont.woff') format('woff'),
url('library/fonts/aller_rg-webfont.ttf') format('truetype'),
url('library/fonts/aller_rg-webfont.svg#AllerRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'AllerBold';
src: url('aller_bd-webfont.eot');
src: url('library/fonts/aller_bd-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/aller_bd-webfont.woff') format('woff'),
url('library/fonts/aller_bd-webfont.ttf') format('truetype'),
url('library/fonts/aller_bd-webfont.svg#AllerBold') format('svg');
font-weight: normal;
font-style: normal;
}
This is working fine when I use ether of the fonts in firefox, however when I use IE8 the webpage crashes attempts to reopen and crashes again. A live example can be found at http://rcnhca.org.uk/sites/first_steps/
Does anyone know what's causing this madness?
I had the same problem a while ago, and after some debugging I found that the crash was because of the #font-face (which in my case was included as a separate stylesheet called fonts.css) was rendered inside <head>. IE8 has a problem with this, but works just fine when I moved the rendering to just inside <body>.
Try this:
<head>
<!--[if gt IE 8]><!-->
<link href="fonts.css" rel="stylesheet" type="text/css">
<!--><![endif]-->
</head>
<body>
<!--[if IE 8]>
<link href="fonts.css" rel="stylesheet" type="text/css">
<![endif]-->
<!-- The rest of your page here -->
</body>
This renders the fonts stylesheet within your head if the browser is newer than IE8. If the browser is IE8, it renders it just inside your body.
Note: You may have to adjust the conditional comments if you're supporting IE7 or older.
IE8 seems to prefer double quotes. This fixed unstyled text on first load for me, might fix crashes for you.
Kudos to the guy here, which solved my problem: #font-face not embedding in IE8 and under
I had similiar issure developing page with custom fonts. IE8 crashed. I fixed it by placing IE8 font-face declaration BEFORE any other font-face declarations. I.E:
<!-- Custom .eot fonts for IE8 -->
<!-- IE8 fonts should load before other font-face declarations to avoid IE8 crash -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="/pub/stylesheets/fonts-ie8.css" />
<![endif]-->
<!-- Custom .woff fonts -->
<link href="/pub/stylesheets/fonts.css" rel="stylesheet">