I use many web fonts in my site, and now I want to add new font family which has serif/sans-serif/monospace type of font.
Part of my css:
#font-face {
font-family: 'DejaVu', sans-serif;
font-weight: 400;
font-style: normal;
src: url(dejavu/DejaVuSans.ttf)
}
#font-face {
font-family: 'DejaVu', monospace;
font-weight: 400;
font-style: normal;
src: url(dejavu/DejaVuSansMono.ttf);
}
#font-face {
font-family: 'DejaVu', serif;
font-weight: 400;
font-style: normal;
src: url(dejavu/DejaVuSerif.ttf);
}
But it doesn't work(In css console I see error like: bad value for font-family).
Is there any way to make it work using only one name for font.
I know that I can change font-family name to look like: 'DejaVu Serif' but I don't want to.
The answer is no, the only way would be to change the font-family name to include the font definition.
You could set the font-style or font-weight and use those to select your font-face but you can't stack a font-face family.
Related
I am curious about the right order of css rules font-family and font-face...
Could I use font-family before the font-face?
Like this:
h2 {
font-family: 'inconsolatacyrmedium';
}
#font-face {
font-family: 'inconsolatacyrmedium';
src: url('inconsolatacyr-webfont.woff2') format('woff2'),
url('inconsolatacyr-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I think you should use #font-face before font-family, because browser reads css from top to end.
I don't a simple moment. Which way is the right way to include multiple fonts in css? Here are simple examples.
This?
#font-face {
font-family: DeliciousRomanRegular;
src: url(/Delicious-Roman-R.otf);
}
#font-face {
font-family: DeliciousRomanBold;
src: url(/Delicious-Roman-B.otf);
}
or this?
#font-face {
font-family: Roman;
src: url(/Delicious-Roman-R.otf);
font-style: normal;
font-weight: normal;
}
#font-face {
font-family: Roman;
src: url(/Delicious-Roman-B.otf);
font-style: normal;
font-weight: bold;
}
And why?
I use the second one, because I can add font-family to BODY and just add font-style or font-weight to other classes. And it works.
But I saw people using the first method many times. But it seems to me too rude.
Every time you need to add bold to a class you have to use "font-family: DeliciousRomanRegular, Arial, sans-serif;". WTF?
The second option: you use the same font name, but for each variant you intend to use, you need to specify (a) the variation and (b) the alternate resource to use as font.
This ensures that in your actual content CSS you can do things like:
p {
font-family: Roman;
font-style: regular;
font-weight: 400;
}
p em {
font-style: italic;
}
p strong {
font-weight: 800;
}
And things will work correctly. Contrast this to the ridiculous notion of "changing the font family just because you wanted the same font, but italic". Let's not do that.
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.
I'm implementing google's font named Roboto in my site.
I need 2 types : bold and regular.
So I checked both types and pressed the download button :
But in the downloaded rar file I got ALL the font styles ( also ones which I didn't choose) :
Anyway I wanted to test the regular font : (the fonts are now in my site and not being loaded from google).
(I got those other extensions types (eot,woff,svg) using a font converter (http://www.font2web.com/))
So I did :
<style type="text/css">
#font-face {
font-family: 'Roboto';
src: url('/font-face/Regular/Roboto-Regular.eot'); /* IE9 Compat Modes */
src: url('/font-face/Regular/Roboto-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/font-face/Regular/Roboto-Regular.woff') format('woff'), /* Modern Browsers */
url('/font-face/Regular/Roboto-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/font-face/Regular/Roboto-Regularo.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body { font-family: 'Roboto', sans-serif; }
</style>
Question :
Let's say I want to apply a Roboto bold style to a div.
Should I do it like this :
div {
font-family: 'Roboto', sans-serif;
font-weight:bold
}
or should I do this ( start all over...)
#font-face {
font-family: 'Roboto-bold';
src: url('/font-face/Regular/Roboto-bold.eot'); /* IE9 Compat Modes */
...
}
and then
div { font-family: 'Roboto-bold', sans-serif; }
This is what you have to do:
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: /* links to the Regular files */;
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: /* links to the Bold files */;
}
Notice how the same font name is used in both #font-face rules. Now the browser knows that the font "Roboto" exists in two variants. The browser will automatically choose the best variant based on your CSS. So, for example:
div {
font-family: Roboto, sans-serif;
font-weight: bold;
}
Here the browser chooses the Bold font file. It's all automatic. You just have to make sure that you set up the #font-face rules correctly.
Any reason why you're downloading the font? If you're using it in a web site you can just use the #import code given by Google.
The checkboxes choosing the variations at the beginning only define the import code. If you choose to download the font to your computer it always gives you all variations regardless of the choices you made.
To use the font just include the link to the stylesheet containing the #font-face which google gives you. E.g.
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
or
#import url(http://fonts.googleapis.com/css?family=Roboto);
in your existing stylesheet.
And then it's just a case of setting the font-family for the elements you choose. E.g.
body {
font-family: 'Roboto', sans-serif;
}
Regarding your question :
Yes, you need a separate #font-face for each variation. See example from google
Google example :
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v8/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(http://themes.googleusercontent.com/static/fonts/roboto/v8/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
If you don't include a bold variation for your font the browser will render bolded text as faux-bold instead. This can have variable appearance depending on browser and OS. Likewise for italic and bold-italic.
From your question it looks like your only declaring one font-face rule, related to the Regular version of the Roboto font.
Using the CSS from your question:
div {
font-family: Roboto, sans-serif;
font-weight: bold;
}
Will result in the browser faux bolding the font. The reason is, the font-face rule hasn't been included for the bold version of the font. Reference here: http://alistapart.com/article/say-no-to-faux-bold
As others (#yotam, etc) have mentioned (regardless of how the fonts are being served) you would need to declare a font-face rule for each font weight.
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: /* links to the Regular files */;
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: /* links to the Bold files */;
}
You would then use that font weight as follows:
body {
font-family: Roboto, sans-serif;
font-weight: 400;
}
h1 {
font-family: Roboto, sans-serif;
font-weight: 700;
}
I would stress to use the actual font weight value and not font-weight: bold. As mentioned using font-weight: bold leaves the decision down the the browser.
At some point you may use a font with weights of 700, 900. Say 700 is be bold, 900 extra bold. If your declaring font-weight: bold the 900 weight would be used, which isn't the effect you would want.
You don't have to start all over.. if you got #font-face in your style then all you need to add is font-family like you said.
div {
font-family: 'Roboto', sans-serif;
font-weight:bold
}
And just for make it clear you can make the font as default by using him in body element like this
body {
font-family: 'Roboto', sans-serif;
font-weight:bold
}
EDIT:
You might considering download your font into your website folder, then instead taking website loading time you'll just have to add the next code to your #font-face:
#font-face {
font-family: 'Roboto';
src: url('fonts/font.ttf'); /* IE9 Compat Modes */
/*....*/
}
The font should be inside fonts folder and he named font.
I have an HTML page, containing various font-styles like normal, bold, italics, oblique etc., defined using CSS. I want to use separate fonts for each font-style, say, myboldfont for bold, myitalicsfont for italics etc. I import fonts using #font-face, like,
#font-face {
font-family: "MyNormal";
font-style: normal;
font-weight: normal;
src: url("mynormalfont.woff") format("woff");
}
#font-face {
font-family: "MyBold";
font-style: normal;
font-weight: normal;
src: url("myboldfont.woff") format("woff");
}
#font-face {
font-family: "MyItalics";
font-style: normal;
font-weight: normal;
src: url("myitalicsfont.woff") format("woff");
}
#font-face {
font-family: "MyOblique";
font-style: normal;
font-weight: normal;
src: url("myobliquefont.woff") format("woff");
}
and imported normal, italics, bold and oblique fonts. I defined body styling like;
body{
font-family: MyNormal, MyBold, MyItalics, MyOblique;
}
Is this enough to define styling for all font-styles in the body? I mean if I assign font-style: italic or font-weight: bold to an element, will the italics font or bold font be used? Or what should I do to achieve this, so that if I use font-weight: bold for any element, myboldfont.woff should be used.
This should work:
#font-face {
font-family: "MyFont";
font-style: normal;
font-weight: normal;
src: url("mynormalfont.woff") format("woff");
}
#font-face {
font-family: "MyFont";
font-style: normal;
font-weight: bold;
src: url("myboldfont.woff") format("woff");
}
And this:
...{
font-family:"MyFont";
font-weight:bold;
}...
Then you would always use the same name for the font-family, but you would change the different properties.
The CSS listed in the question is the safest approach. IE8 has display issues when more than 1 weight, or when more than 4 weights or styles, are linked to a font-family name. Using a unique font-family name for each font variation avoids this problem.
When a unique font-family name is used for each font variation, it's not necessary to identify the weight or style in the #font-face declartion, or in the CSS rules for HTML elements that use the font.
Also, to support the widest possible set of browsers, use a combination of .woff, .ttf, and .eot for the embedded fonts. This is the approach used by TypeKit:
#font-face {
font-family: 'MyNormal';
src: url('mynormalfont.eot');
src: url('mynormalfont.eot?#iefix')
format('embedded-opentype'),
url('mynormalfont.woff') format('woff'),
url('mynormalfont.ttf') format('truetype');
}
#font-face {
font-family: 'MyBold';
src: url('myboldfont.eot');
src: url('myboldfont.eot?#iefix')
format('embedded-opentype'),
url('myboldfont.woff') format('woff'),
url('myboldfont.ttf') format('truetype');
}
#font-face {
font-family: 'MyItalics';
src: url('myitalicsfont.eot');
src: url('myitalicsfont.eot?#iefix')
format('embedded-opentype'),
url('myitalicsfont.woff') format('woff'),
url('myitalicsfont.ttf') format('truetype');
}
#font-face {
font-family: 'MyOblique';
src: url('myobliquefont.eot');
src: url('myobliquefont.eot?#iefix')
format('embedded-opentype'),
url('myobliquefont.woff') format('woff'),
url('myobliquefont.ttf') format('truetype');
}
And the font variants are used as follows:
p {
font-family: MyNormal, sans-serif; /* Still useful to add fallback fonts */
font-size: 12px;
}
h2 {
font-family: MyBold, sans-serif;
font-size: 20px;
}
The downside is that the font-family name has to be specified in every CSS rule that uses one of the font variations. But that could be considered the price that has to be paid for wide cross-browser support at present.