CSS font-family fonts stack precedence - html

Short version
Why do the two sections here render differently, though they both have the same available font as the first item in the font-family: css property?
Extra long version:
As far as as I know, in css, 'font-family' property contains a list of fonts, prioritized from left to right. If the first font is found, other fonts in the list do not matter:
The property value is a prioritized list of font family names and/or
generic family names. w3.org
and
The font-family property can hold several font names as a "fallback"
system. If the browser does not support the first font, it tries the
next font. w3schools.com
So, I have the following piece of html, repeated twice, once inside a #font-simple-stack, and another inside a #font-full-stack div:
<h1 class="serif">
<abbr title="EtaBits">ηBits</abbr> Syria</span>
<small> Web Development & Solutions</small>
</h1>
<p class="sans-serif"><strong>EtaBits</strong> is your ultimate online business partner, it helps your business whether it is internet-based or internet-promoted.</p>
<p class="sans-serif"><strong>EtaBits</strong> is a Syria based Web Consultancy, Development & Solutions firm. We aim at providing you with exactly what you need to reach your users and clients.</p>
...and the following font css definitions:
#font-simple-stack .serif {
font-family: 'Roboto Slab', serif;
}
#font-simple-stack .sans-serif {
font-family: 'Open Sans', sans-serif;
}
#font-full-stack .serif {
font-family: 'Roboto Slab', "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
}
#font-full-stack .sans-serif {
font-family: 'Open Sans', "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
}
First fonts in the two categories, Roboto Slab & Open Sans, are both loaded from google fonts api:
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab:600|Open+Sans:400,700" />
All said, I expect, that in both times, whether inside #font-full-stack or #font-simple-stack, to have the same result, but in reality, the two stacks renders differently!
I tested on both Firefox and Chromium, under my Ubuntu 12.04 x64 machine.

The font Roboto Slab is not available, as you can see e.g. by viewing the CSS being applied in suitable developer tools of a browser. The reason is that you are asking for that font with weight 600, and no such typeface is available. By Google info on Roboto Slab, the available weights are 100, 300, 400, 700.

The google font stylesheet you're calling in doesn't actually have the Roboto font in it.
See below:
http://fonts.googleapis.com/css?family=Roboto+Slab:600|Open+Sans:400,700
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
If you try separating the two calls out it may work.
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

The font 'Roboto' isn't being called, so the first one fails on Roboto, and displays the default serif instead.
The second has a load of fall back fonts and so it displays one of these instead, so effectively, it's displaying two seperate fonts.

There are two possibilities:
You are calling one of the div's incorrectly (wrong id) and/or
One of both of the Google Font's are not loading properly
If it works in one div and not in the other there could be a problem with the way you are calling the div. In other words you may not be calling the div by the correct id. It works with one id but not with the other yet there is no difference in the first choices of the font stack from the coding you have shown us.
-or-
You are getting system fonts for serif and sans-serif in the first div and perhaps some other choice in the font stack for the second div. This is the more likely scenario.*
Without seeing the html code where you call the div's by ID and not seeing the resultant font on the screen it is difficult to do anything but speculate.

Related

Browser render safety fonts instead local

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")

What can be the reason for #font-face failing to work?

I have a simple example, where for some reason definition of #font-face will work only for Chrome and fails to work in FireFox, Safari and IE:
https://jsfiddle.net/d8e6xz7e/1/
HTML:
<body>
<div class="original-font">
This is the original font
</div>
<div class="bold-font">
This should be bold! But it is not in IE, Safari and FireFox
</div>
</body>
CSS:
#font-face {
font-family: 'Lucida Bold Italic';
font-style: italic;
font-weight: bold;
src: local('Lucida Sans Unicode'), local('Times New Roman');
}
.original-font {
font-family: 'Lucida Sans Unicode';
}
.bold-font {
font-family: 'Lucida Bold Italic';
}
According to the specification (https://developer.mozilla.org/en/docs/Web/CSS/#font-face) it should be supported for the modern browsers. That is why, I suspect that there is something missing in the css definition.
Would be grateful for any advice!
You're most likely confusing a font face with a font family:
"Lucida Sans Unicode" is a font family
"Lucida Bold Italic" is a font face
In short, a font family is a group of font faces.
#font-face declares a font face joining some custom family. src is the path to a font face file, and that is likely where the problem is:
src: local('Lucida Sans Unicode'), local('Times New Roman');
That's two font families being used as the src of a font face.
Presumably Chrome handles this easily made mistake and uses the 'normal' font face from the family whenever it spots that this has happened.
So, what you probably meant was this:
#font-face {
font-family: 'MyBoldFont';
font-style: italic;
font-weight: bold;
src: local('Lucida Bold Italic'), local('Times New Roman Bold Italic');
}
.bold-font {
font-family: 'MyBoldFont';
}
Whenever the text is bold, italic and uses .bold-font, you'll see your custom font face show up, like this simple example:
<b><i class='bold-font'>Hello! I'll be Lucida/TNR</i></b> and this will be something else.
Here it is as a fiddle.
#font-face {
font-family: myFirstFont;
src: url(font.woff);
}

Issue with rendering Open Sans Light on Firefox

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.)

How to use Google font in wordpress?

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

How many font families are available for Google Font API?

I think the service is great but are these few the only fonts that are available:
http://code.google.com/webfonts
?
Or are there others and if so where can I see them?
Currently those are the only ones available. You can host your own opentype font, however, using the following CSS.
#font-face {
font-family: Kabel;
src: url("ItcKabel-Demi.otf") format("opentype");
}
h2{
font-family: Kabel, "Lucida Grande", Lucida, Verdana, sans-serif;
}