Browser render safety fonts instead local - html

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

Related

CSS - Implement different fonts of a font-family

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.

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-face Is Not Working Properly

I am using the Open Sans font from Google fonts in my application using this import rule:
http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
When testing locally and I have no internet connection, the font no longer works.
What I have tried:
I have downloaded this font and set it up inside of my CSS file for #font-face,
but it shows all characters are different.
To fix your issue.
1.You first have to download the .ttf file from google fonts.
2.Put that file in your project and then add following to your css.
3.In url, specify the path of your .ttf file.
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url('your link to .ttf file') format('woff2');
}
use below code to import Google Web Font in CSS file.
#import url('http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800%22');
1st put this inside your head tag
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800%22' rel='stylesheet' type='text/css' />
All you need to do is add the font name to your CSS styles. For example:
h1 { font-family: 'Open Sans', Arial, serif; font-weight: 400; }

Why my CSS looks different than your CSS?

I wanted to have a page of mine the same textual style as this beautiful text, Dan Wahiln's AngularJS tutorial
So in Chrome Dev Tools: I can see the following:
font-size: 12pt;
line-height: 1.8em;
font-family: "Open Sans",Calibri,Candara,Arial,sans-serif;
Please see the image below:
Now to my CSS:
p.test-fonts {
font-family: "Open Sans",Calibri,Candara,Arial,sans-serif;
font-size: 12pt;
line-height: 1.8em;
margin: 0 0 10.5px
}
However, the text rendered differently::
Why this difference?
if you look in his source, you'll see he is including the stylesheet:
http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700
which includes:
#font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
src: local("Open Sans"), local("OpenSans"), url("http://fonts.gstatic.com/s/opensans/v10/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://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff") format("woff");
}
#font-face {
font-family: "Open Sans";
font-style: italic;
font-weight: 400;
src: local("Open Sans Italic"), local("OpenSans-Italic"), url("http://fonts.gstatic.com/s/opensans/v10/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff") format("woff");
}
#font-face {
font-family: "Open Sans";
font-style: italic;
font-weight: 700;
src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url("http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff") format("woff");
}
Do you have the Open Sans font in your project?
Open-sans is not a browser default font, you need to include it manually, it's a font provided by Google Fonts and therefore you need to call it in your document whereas is from the CSS through #import or inside the DOM in the .html file.
If you go to the GoogleFonts site http://www.google.com/fonts and look for "Open-sans" you'll find all the options there on how to use it, you'll have to choose the weights you want to use and the different styles you want to import as each one of those differences are an actual independent font and so they will weight more as you increase the number of variations available for your site.
ALSO
You are viewing your document loading it from the "file" declaration on your browser, I would recommend you to use a local-machine such as Xampp if you are using Windows in order to not have URL issues when using relative paths on your CSS.

Open Sans Condensed Light not working in Firefox

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>