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;
Related
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.
This question already has answers here:
How to import Google Web Font in CSS file?
(13 answers)
Closed 7 years ago.
I would like to use googles "source sans pro" font in the font-family attribute in CSS, in my HTML site. I use Bootstrap as a front end framework.
https://www.google.com/fonts/specimen/Source+Sans+Pro
How can I achieve that?
Do I have to include the file into my html site?
Thank you for any help!
Add this string in head section of your site:
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
Then use this font:
h1 {
font-family: 'Source Sans Pro', sans-serif;
}
The instructions are given on the link at the top of the page you show. https://www.google.com/fonts#UsePlace:use/Collection:Source+Sans+Pro
You include this in the head of your page:
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
and specify the font family in your CSS.
element {
font-family: "Source Sans Pro"
]
The fonts
You can select the fonts you want and you get a link:
for HTML
https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,900italic,900,700italic,700,600italic,600,400italic,300italic,300,200italic' rel='stylesheet' type='text/css'>
paste this link in your
Then use this in your css
font-family: 'Source Sans Pro', sans-serif;
so something like this
.class{
font-family: 'Source Sans Pro', sans-serif;
}
I'm trying to use and italic with google fonts and it's not working at all.
I included this line on my HTML.
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400'
rel='stylesheet' type='text/css'>
For example, when I use the code below, all the texts look "normal" without bold and italic as expected. Any suggestions?
Thanks.
<p>this is a <b>bold</b> text and this is <i>italic</i> text</p>
Use the font according to its instructions (unless you understand well how the font works and can knowingly deviate from the instructions). In the interface, select Normal (selected by default), Normal Italic, and Bold, if you want just normal, italic, and bold (but not italic bold). Google then tells you what link element to use. And it works:
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700'
rel='stylesheet' type='text/css'>
<style>
p { font-family: Open Sans }
</style>
<p>this is a <b>bold</b> text and this is <i>italic</i> text</p>
Use the 700 font declaration:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'),
url(http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-honF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
}
or, as in your example:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:800italic,700,300,600,800,400' rel='stylesheet' type='text/css'>
and then:
.yourClass {font-family: 'Open Sans'; font-weight: 700;}
The same way for the italic, as it is claims when you define your CSS font-type, and in the guide.
I am using Google's Open Sans Font in my application.
I have defined the stylesheet as instructed:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700'
rel='stylesheet' type='text/css'>
I then used it on the body selector as:
body {
font-family: 'Open Sans', sans-serif;
}
I have not defined font family anywhere else. I assume that since I have defined it at the parent, the child elements will automatically inherit it.
However, if I open up the inspector for say an anchor tag in my application and see the computed styles for that tag, I find that (Chrome Latest) the "Rendered Font" says "Times New Roman 18 glyphs" - Is this correct? I was expecting it to say "Open Sans" - Is the Open Sans font not being applied?
Check out the codepen link. Its working fine for me !
.open-sans-font{
font-family: 'Open Sans', sans-serif;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<div class="open-sans-font">
Stackoverflow rocks !!!
</div>
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.