I have no problem displaying html pages on IE and Chrome using Open Sans Light, however when using Firefox, it does not understand this type of fonts.
This is a .css sections defining my fonts:
.txtName
{
margin-left: 18px;
font-size: 20px;
color: #0140be;
font-family: 'Open Sans Light' !important;
font-weight:normal;
line-height: 1.4em;
}
This is the part of html file that need to be displayed the same on IE, Chrome and FF:
<div class="txtName-Main">
<h1 class="txtName">Your pathway to success starts here</h1>
</div>
What can be the problem?
Thx
'Open Sans Light' is not a valid representation of the font-family. The 'Light' (300 weight) version of 'Open Sans' is:
In the head of your document:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
In your CSS:
font-family: 'Open Sans', sans-serif;
font-weight: 300;
I see a few suggestions, But what worked for me is loading my fonts with:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:Light' rel='stylesheet' type='text/css'>
and in .css I had to use the following definition:
color: #0140be;
font-family: 'Open Sans';
font-style: Light;
font-size: 20px;
font-weight: normal;
So, instead of having:
font-family: 'Open Sans Light'
I used
font-family: 'Open Sans';
font-style: Light;
and it worked
it appears that all the browsers are somehow using different definitions for at least this font. i had it installed on my site and been trying to figure how to make it look descent in all browsers, not just chrome and opera - as all others, that is firefox, ie and safari had those fonts screwed. until accidentally i made firefox see the font ok, but then chrome and opera got screwed. so that was when i realized that actually assigning the same font in two different ways solves the problem: if the browser's ok with the first definition, it won't look at the next one, otherwise it'll go for the second one. ah, the code itself:
font-family: open sans condensed light, open sans condensed;
i used it for assigning fonts to different divs. cheers, hope this helps.
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
Goes in the <head> element and downloads light and regular fonts
In css style:
ul, p, h1, h2, h3, h4, h5, li, dd, dt, a{
font-family:'Open Sans', sans-serif;
font-weight: 300;
font-style: normal;
sets up (most) elements for web-based font and a (local) fall back font. font-style: normal is default, so it is not required. (Font-style:Light is not valid property.)
Related
When i open devtools in chrome or firefox, find my .page-header__hero-motivation and see render font is Comic Sans, not Caveat.
#font-face {
font-family: "Caveat";
src: url("../fonts/Caveat-Regular.woff2") format(woff2),
url("../fonts/Caveat-Regular.woff") format(woff);
font-weight: 400;
font-style: normal;
font-display: swap;
}
.page-header__hero-motivation {
font-family: "Caveat", "Comic Sans MS", cursive;
font-size: 18px;
color: #8E80A9;
}
My website tree
index.html
css -> style.css
fonts -> Caveat-Regular.woff2 & Caveat-Regular.woff
take this font from googlefonts and convert in online to woff&woff2.
chrome devtools
It seems that Comic Sans is the generic family not the font family. Don't set both, just set either font or generic family, also see https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
Tell me if it works, otherwise post the entire code please.
OMG, i kill about 5 hours on that...
I forgot quotes in format #font-face
wrong
format(woff2)
right
format("woff2")
I have the font-family Roboto with two different font-types (400 and 500i)
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500i" rel="stylesheet">
I would like to implement 500i, but this:
p {
font-family: 'Roboto', sans-serif;
}
just allows me to use the 400 font.
How can I implement the 500i without removing the 400?
Define both bold and italic on the element:
p {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-style: italic;
}
NOTE
If you have the Roboto font installed locally you'll need to add script=all rev=2 in the following manner:
p {
font-family: 'Roboto script=all rev=2', sans-serif;
font-weight: 500;
font-style: italic;
}
If the font is installed locally the browser is going to rely on that font and ignore the web-font. This SO Post covers this. I can't say with any certainty but it seems likely that adding script=all rev=2 by default is the way to go due to the fact we don't know if our sites visitors have a particular font installed. If you navigate to the Roboto font offering and inspect (using a browsers dev-tools) the 'Medium Italic' example we see the font-family property is using script=all rev=2 by default.
I have a little experience with css, and learning it day by day, but I need to figure this out.
I have a little problem with defining the styles for the page.
My page contains the following sections:
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:Light' rel='stylesheet' type='text/css'>
</head>
.
.
.
.
<article>
<header>
<h1 class="txtName">Your pathway to success starts here</h1>
</header>
<p class="txtDesc">
SomeText.................SomeText
</p>
</article>
and I have the .css file containing the following section:
article h1
{
color: #0140be;
font-family: 'Open Sans';
font-style: Light;
font-size: 20px;
font-weight: normal;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
The text inside the header is displayed with correct styles, however, text inside the paragraph is not displayed correctly. Looks like it is not recognizing given styles.
It displays the right font-family, but does not recognize font-weight.
What am I doing wrong here? Need some help.
Thank you
Link : https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
As you can see there is styles for fonts like "Light 300 Italic" or "Extra-Bold 800". You must select that styles for bolder or lighter fonts. Then you can use font-weight in css otherwise it doesnt works.
Dont Forget: When you select "light 300" you can use font-weight:300. So font-weight:200 is not make any differences. If you select too much font styles it will take more time to load fonts from google when opening your page. You can see performance indicator on right.
Your link tag should look like
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
You need to include each of the font weights that you want in the URL.
Your styles should be:
article h1
{
color: #0140be;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
You select which font style you want with the font-weight attribute.
JSFiddle
My custom css has the following code
h1 a {
font-family:'Droid Sans Mono''Share Tech Mono''Ropa Sans', sans-serif;
'Poiret One''Cutive Mono''Helvetica Neue''Arial'; !important;
}
this is at the top of my custom css:
#import url (http://fonts.googleapis.com/css?family=Roboto|Droid+Sans+Mono|Share+Tech+Mono|Ropa+Sans|Cutive+Mono|Poiret+One|Lato:100,600,900) ;
and my in page code is:
<h1 style="font-size: 25px; font-weight: bold; color: #ffffff; hover font-family:'Droid Sans Mono''Share Tech Mono''Ropa Sans', sans-serif;"><a href="http://www.xxx.com/?page_id=4348"></h1>
But the none of the fonts seem to be loading. What am I doing wrong?
You're loading the CSS in your custom CSS, which is good, but you're not calling it properly.
You have this:
h1 a {
font-family:'Droid Sans Mono''Share Tech Mono''Ropa Sans', sans-serif;
'Poiret One''Cutive Mono''Helvetica Neue''Arial'; !important;
}
Not only is that code wrong, it's scary.
This is what it should be like:
h1 a {
font-family: 'Droid Sans Mono', 'Share Tech Mono', 'Ropa Sans', sans-serif, 'Poiret One', 'Cutive Mono', 'Helvetica Neue', 'Arial' !important;
}
Each new font call should be seperated with a , and the !important goes before the ; and the style will always only have one ; right at the very end of the css style rule.
Also just for the record, there is no good reason you need to include that amount of fonts, and if Droid Sans Mono and Share Tech Mono and even Ropa Sans don't load, anything after sans-serif won't load as sans-serif will be the font of choice as it's a default choice and should only really be used as a last resort/fallback (if you have other fonts you want to take precedence, that is).
If they do load, then you're only going to ever be using Droid Sans Mono and then it's a waste calling all the other fonts.
Make sure you're actually using all of those fonts, as it could essentially slow down the website load time drastically.
Side note:
Please try and refrain from using inline css (css that is put in using the style in a html attribute). However, if you must do it, you need to fix your h1 tag also:
<h1 style="font-size: 25px; font-weight: bold; color: #ffffff; font-family:'Droid Sans Mono', 'Share Tech Mono', 'Ropa Sans', sans-serif;"><a href="http://www.xxx.com/?page_id=4348"></h1>
Don't just include the word hover in there because it will break your CSS and anything after has a high chance of not running. Again, separate each instance of font with a , and have only a ; after each new css style rule.
You don't need both inline css and a css file styling two identical attributes, just use the .css file.
Please make sure that you have url( and not url (. Although it is a simple (space), it is a function and will not work if the ( is not directly after url.
you're not loading the font anywhere. i suggest you install and use this plugin: http://wordpress.org/plugins/wp-google-fonts/
you'll choose the font you want on your website and you will be able to use it.
hope this helps
I have downloaded the Open Sans Condensed Light font from Google Web Fonts, and also attached their CSS code:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=greek-ext&v2'
rel='stylesheet' type='text/css'>
But every browser other than Firefox, shows exact font family i.e. it looks fine in IE, Chrome, Safari, but not in Firefox.
Here is my CSS and the HTML code:
h2.title-border {
border-bottom: 1px solid #000;
margin-top: 10px;
line-height: 45px;
margin-bottom: 15px;
}
.heading-sub {
background: #000;
font-family: "Open Sans Condensed Light";
font-weight: normal;
text-transform: none;
font-size: 32px;
padding: 0 15px;
margin-bottom: 0px;
color: #fff;
border-bottom: 1px solid #000;
}
HTML:
<h2 class="title-border"><span class="heading-sub">About Us</span></h2>
Can you please suggest, how should I fix Firefox regarding this?
According to the API, you should be calling the font like this
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:light&v1' rel='stylesheet' type='text/css'>
The light variant needs to be called specifically, i.e. :light.
The other browsers are probably ignoring the Light in your stylesheet and giving you the Open Sans Condensed you asked for in the API call.
See here
Condensed is the "style" of the "Open Sans" font, not part of the name. This worked for me.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:Condensed" />
.selector
{
font-family:'Open Sans';
font-style:condensed;
}
I must have tried a gazillion variations to get this work. I am trying to get Open Sans Condensed embedded into a pdf via WKHtmlToPdf.
I think it is important that you download and install the Open Sans Condensed ttf directly from google and install it. It is also important to reboot to allow other services access after install. I downloaded the ttf from font-squirrel originally and condensed was listed as "Open Sans" in windows/fonts, which is wrong, if you look after the google install it is listed as "Open Sans Condensed Light" so even google's local('Open Sans Cond Light') script is wrong.
As mentioned before you need to be explicit with the stretch and weights, so this is what has worked for me:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans');
}
#font-face {
font-family: 'Open Sans Condensed';
font-stretch:condensed;
font-style: normal;
font-weight: 300;
src: local('Open Sans Condensed Light');
}
##font-face { font-family: 'Open Sans Condensed Bold'; font-stretch:condensed; font-style: normal; font-weight: 700; src: local('Open Sans Condensed'), local('Open Sans Condensed Bold');}
To make the font work for IE8-IE9 you have to use a EOT font file,
On this page you can download the font as a webkit:
http://www.fontsquirrel.com/fonts/open-sans-condensed
You have to refer to Google CSS. See their QuickStart Guide.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed">
You probably ought to use font-stretch: condensed (see Mozilla docs).
For example, change your .heading-sub CSS as follows:
.heading-sub {
background:#000;
font-family:"Open Sans";
font-stretch: condensed;
font-weight:300;
text-transform:none;
font-size:32px;
padding:0 15px;
margin-bottom:0px;
color:#fff;
border-bottom:1px solid #000;
}
Make use of Google Fonts Open Sans in the various styles:
Click on this link -> https://www.google.com/fonts/specimen/Open+Sans and then click on Open Open Sans in Google Fonts.
Under option 3 and 4 you will find the html link to use in your header as well as the CSS style usage.
for Firefox:
My problem solved after I added to CSS this line:
font-stretch: condensed;
You should use Google generated code, mine was:
http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css'>
as I am using 700 and 300 weights.
CSS:
font-family: 'Open Sans Condensed', sans-serif;
font-weight:700;
font-stretch: condensed;
it appears that all the browsers are somehow using different definitions for at least this font. i had it installed on my site and been trying to figure how to make it look descent in all browsers, not just chrome and opera - as all others, that is firefox, ie and safari had those fonts screwed. until accidentally i made firefox see the font ok, but then chrome and opera got screwed. so that was when i realized that actually assigning the same font in two different ways solves the problem: if the browser's ok with the first definition, it won't look at the next one, otherwise it'll go for the second one. ah, the code itself:
font-family: open sans condensed light, open sans condensed;
i used it for assigning fonts to different divs. cheers, hope this helps - at least for me it was a major pain in the behind.
It doesn't works for me because the #import should be the first line in style.
Works:
<style>
#import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
.myStyle {
}
</style>
Doesn't works:
<style>
.myStyle {
}
#import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
</style>