How many font families are available for Google Font API? - html

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;
}

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);
}

Font issue in Google Chrome [duplicate]

I am using Segoe UI Light font in my website.
the css used is as follows.
.divMainHeader
{
font-family:Segoe UI;
font-size:28pt;
font-weight:lighter;
width:100%
}
But Google Chrome is not rendering this font properly. I am getting a bold font of Segoe UI Light in Chrome.
The Image.
The versions of browsers i'm using.
Internet Explorer : 9
Mozilla Firefox : 21
Google Chrome : 27
Its difficult to get this working in Firefox. Font weight 300 doesnt work few time in all versions. The below code worked for me and compatible with all browsers.
font-family: "Segoe UI Light","Segoe UI";
font-weight: 300;
See Here
This is from a HTML5 solution, but it might help you too, as it's also in Visual Studio...
Hovering over the CSS font-weight options will tell you the weight in words (Light, Semi, etc.)
100: Thin
200: Extra Light (Ultra Light)
300: Light
400: Normal
500: Medium
600: Semi Bold (Demi Bold)
700: Bold
800: Extra Bold
Hope it helps.
Follow the below options and add font-weight instead of using semibold or semilight.Just use 'segoe ui' with combination of font-weight.
#font-face {
font-family: "Segoe UI";
font-weight: 200;
src: local("Segoe UI Light");
}
#font-face {
font-family: "Segoe UI";
font-weight: 300;
src: local("Segoe UI Semilight");
}
#font-face {
font-family: "Segoe UI";
font-weight: 400;
src: local("Segoe UI");
}
#font-face {
font-family: "Segoe UI";
font-weight: 600;
src: local("Segoe UI Semibold");
}
#font-face {
font-family: "Segoe UI";
font-weight: 700;
src: local("Segoe UI Bold");
}
#font-face {
font-family: "Segoe UI";
font-style: italic;
font-weight: 400;
src: local("Segoe UI Italic");
}
#font-face {
font-family: "Segoe UI";
font-style: italic;
font-weight: 700;
src: local("Segoe UI Bold Italic");
}
Could be because of various reasons:
Perhaps you are using the wrong font format. Chrome supports SVG, WOFF, TTF/OFT.
Taken the a wrong approach towards defining font-weight, which leads the browser to interpret the font-weight property wrongly
Sample: http://pastebin.com/FiGvAfTk
Are you defining your fonts properly?
Interesting ... I'm having almost the reverse problem ... I can get Segoe UI Light to render properly in Chrome and IE 10, but not in FF 21.
In another post some time back, it was suggested to use something similar to what Microsoft uses on their site ...
h1, h2, h3, h4, h5, h6, h7 {
font-family: "wf_SegoeUILight","wf_SegoeUI","Segoe UI Light","Segoe WP Light","Segoe UI","Segoe","Segoe WP","Tahoma","Verdana","Arial","sans-serif";
font-weight: 300;
}
For the browsers that don't honor font-weight + the Segoe UI font, specifying Segoe UI Light first seems to guarantee that it renders the lighter weight font.
However, in FF 21, I'm still seeing the normal Segoe UI font regardless of what I try. Firebug indicates that it's choosing the Segoe UI font from the list.
I had a similar issue myself, with the browser only rendering standard Segoe UI as opposed to the lighter version. If you change the font-family to Segoe UI Light it should do what you want.
Please see the revised code below:
.divMainHeader {
font-family:"Segoe UI Light";
font-size:28pt;
font-weight:100;
width:100%
}
#font-face {
font-family: 'Myfont';
font-style: normal;
font-weight: 200;
src: local('Segoe UI Light'), local('SegoeUI-Light');
}
body{
font-family: 'Myfont';
}
this code fixed my problem like yours

CSS font-family fonts stack precedence

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.

Segoe UI Light Font Not displaying properly in Google Chrome

I am using Segoe UI Light font in my website.
the css used is as follows.
.divMainHeader
{
font-family:Segoe UI;
font-size:28pt;
font-weight:lighter;
width:100%
}
But Google Chrome is not rendering this font properly. I am getting a bold font of Segoe UI Light in Chrome.
The Image.
The versions of browsers i'm using.
Internet Explorer : 9
Mozilla Firefox : 21
Google Chrome : 27
Its difficult to get this working in Firefox. Font weight 300 doesnt work few time in all versions. The below code worked for me and compatible with all browsers.
font-family: "Segoe UI Light","Segoe UI";
font-weight: 300;
See Here
This is from a HTML5 solution, but it might help you too, as it's also in Visual Studio...
Hovering over the CSS font-weight options will tell you the weight in words (Light, Semi, etc.)
100: Thin
200: Extra Light (Ultra Light)
300: Light
400: Normal
500: Medium
600: Semi Bold (Demi Bold)
700: Bold
800: Extra Bold
Hope it helps.
Follow the below options and add font-weight instead of using semibold or semilight.Just use 'segoe ui' with combination of font-weight.
#font-face {
font-family: "Segoe UI";
font-weight: 200;
src: local("Segoe UI Light");
}
#font-face {
font-family: "Segoe UI";
font-weight: 300;
src: local("Segoe UI Semilight");
}
#font-face {
font-family: "Segoe UI";
font-weight: 400;
src: local("Segoe UI");
}
#font-face {
font-family: "Segoe UI";
font-weight: 600;
src: local("Segoe UI Semibold");
}
#font-face {
font-family: "Segoe UI";
font-weight: 700;
src: local("Segoe UI Bold");
}
#font-face {
font-family: "Segoe UI";
font-style: italic;
font-weight: 400;
src: local("Segoe UI Italic");
}
#font-face {
font-family: "Segoe UI";
font-style: italic;
font-weight: 700;
src: local("Segoe UI Bold Italic");
}
Could be because of various reasons:
Perhaps you are using the wrong font format. Chrome supports SVG, WOFF, TTF/OFT.
Taken the a wrong approach towards defining font-weight, which leads the browser to interpret the font-weight property wrongly
Sample: http://pastebin.com/FiGvAfTk
Are you defining your fonts properly?
Interesting ... I'm having almost the reverse problem ... I can get Segoe UI Light to render properly in Chrome and IE 10, but not in FF 21.
In another post some time back, it was suggested to use something similar to what Microsoft uses on their site ...
h1, h2, h3, h4, h5, h6, h7 {
font-family: "wf_SegoeUILight","wf_SegoeUI","Segoe UI Light","Segoe WP Light","Segoe UI","Segoe","Segoe WP","Tahoma","Verdana","Arial","sans-serif";
font-weight: 300;
}
For the browsers that don't honor font-weight + the Segoe UI font, specifying Segoe UI Light first seems to guarantee that it renders the lighter weight font.
However, in FF 21, I'm still seeing the normal Segoe UI font regardless of what I try. Firebug indicates that it's choosing the Segoe UI font from the list.
I had a similar issue myself, with the browser only rendering standard Segoe UI as opposed to the lighter version. If you change the font-family to Segoe UI Light it should do what you want.
Please see the revised code below:
.divMainHeader {
font-family:"Segoe UI Light";
font-size:28pt;
font-weight:100;
width:100%
}
#font-face {
font-family: 'Myfont';
font-style: normal;
font-weight: 200;
src: local('Segoe UI Light'), local('SegoeUI-Light');
}
body{
font-family: 'Myfont';
}
this code fixed my problem like yours