I have a collection of fonts. Let's say font-a-normal, font-a-italic, font-a-bold and so on with b, c...
If in some css file I have:
font-family: 'font-a-bold';
In another file, I could have
font-weight: bold;
The result actually is double bold font, that is two times thicker than what I need on some html pages. Because project specifications changed a lot over time and because I have a big number of static pages that I would have to change manually if I would want only to remove font-weight I'm searching for another solution.
Is there a rule or some way to specify that 'font-a-bold' shouldn't become thicker. And if I have
font-family: 'font-a-normal';
font-weight: bold
it should actually become:
font-family:'font-a-bold'
Is there a pure css solution?
Update
Or a fast and possibly clean way of removing double bold.
If you are pulling in all the fonts with #font-face declarations, you probably could do something like this:
#font-face {
font-family: 'MyFont-Bold';
font-weight: normal;
font-style: normal;
src: ...
}
#font-face {
font-family: 'MyFont-Bold';
font-weight: bold;
font-style: normal;
src: ... // same as above: always the same bold
}
#font-face {
font-family: 'MyFont';
font-weight: normal;
font-style: normal;
src: ... // regular weight new style
}
#font-face {
font-family: 'MyFont';
font-weight: normal;
font-style: normal;
src: ... // boldweight new style
}
I would think the browser doesn't care if what you tell it is a bold weight is not actually any bolder than the regular.
Fiddle
You can't tell CSS to not apply a certain style if another style is being applied, So...
I would simply do this by using the 'lots of classes' approach to CSS.
Make classes:
.bold {
font-family: 'font-a-bold';
}
.italic {
font-family: 'font-a-italic';
}
and so on. Then just apply these classes to the text you want to have said font-family. Just don't apply a <strong> tag to a piece of text that is already using the .bold class for example.
Related
So I downloaded a font (legally I bought it)
and the font looks really good. but it only displays in the brackets live preview.
when I open it in chrome, it just refuses to work. I followed all the instructions on the font when I bought it. Can anyone help me?
This is an image of the bracket font display which is what I want:
And this is the exact same code when I open the index.html file in Google Chrome.
This is the code I am using to get the font in CSS
#font-face{
font-family:"Ethnocentric W05 Italic";
src:url("/fonts/MTI-WebFonts-367222846/Fonts/5118942/e91f32ff-44ec-47c0-afd3-5cdeeb6c73c8.woff2")
format("woff2");
}
and this is what I used to put it in the header
font-family: "Ethnocentric W05 Italic";
If you declare a custom font using #font-face, the browser will try to fake the bold and italic styles if it can’t find them.
Instead of defining separate font-family values for each font, You can use same font-family name for each font, and define the matching styles, like so:
[css]#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-B-webfont.eot');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-BI-webfont.eot');
font-weight: bold;
font-style: italic;
}
.test {
font-family: Ubuntu, arial, sans-serif;
}[/css]
Then all you need to do is apply that single font-family to your target, and any nested bold or italic styles will automatically use the correct font, and still apply bold and italic styles if your custom font fails to load.
Here is the css: one is Regular and other one is Bold but both has same font-family name.
How to differentiate and use it in our stylesheet?
#font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Bold.eot');
src: url('fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/Montserrat-Bold.woff') format('woff'),
url('fonts/Montserrat-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Regular.eot');
src: url('fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/Montserrat-Regular.woff') format('woff'),
url('fonts/Montserrat-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Use different weights.
Give the first one a weight of 200 and the second one a weight of 300. Then, you can use the two:
font-family: 'Montserrat', sans-serif;
font-weight: 200 /* for the first one */
/* or font-weight: 300; for the second one */
EDIT: After the OP specified the weights
You can give the following attributes to the second (bold) one:
font-weight: bold;
font-weight: 700; /* fallback */
and the following to the first (regular) one:
font-weight: 300;
Now, to use the bold one:
font-family: 'Montserrat', sans-serif;
font-weight: bold; /* or 700 */
and to use the normal one, switch the font-weight:
font-weight: 300;
There you go! :)
Mr_Green, fresh out of Google's Font CSS:
A basic analogy to describe how the font-weight rule works
When you describe a font with a name, imagine (in the most abstract of the explanations) that you create an object; but, when you create multiple font-rules with the same name, imagine you create an array. Now, to access and array, you have to use its index. The index here is the font-weight. So, to access different weights (technically, fonts), you use the weight. Continuing the analogy of the array above, you have to manually
define the index, it's not automatically done.
I think this makes it a little more clear.
Simply you can use different font-family names for both Bold and Regular fonts, then refer in CSS as usual like below.
#font-face {
font-family: 'MontserratBold';
src: url('fonts/Montserrat-Bold.eot');
src: url('fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/Montserrat-Bold.woff') format('woff'),
url('fonts/Montserrat-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Regular.eot');
src: url('fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/Montserrat-Regular.woff') format('woff'),
url('fonts/Montserrat-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
The font-family value does not have to be unique: According to the w3 consortium, 'a font family defines a set of faces that vary in weight, width or slope. CSS uses the combination of a family name [i.e. font-family] with other font properties [src, font-style, font-weight and font-stretch] to select an individual face'. That is, two different #font-face rules may have the same font-family value (e.g. 'Montserrat') but be distinguished by e.g. different font-weight values (e.g. bold and normal, resp.). In this way different fonts can be selected.
The CSS style specified by #nag looks ok to me.
How to distinguish them? With selector-specific CSS. Mostly set by the developers.
However, since usually user agents define default CSS styles for standard html elements, most of the time you don't need to (set CSS for these). E.g. assuming you have somewhere defined the font-family as being Montserrat (e.g. in the body), and default CSS styles are not overridden, the content of the strong element, as in
<strong>I'm bold</strong>
is 'automatically' rendered bold because its default CSS style is usually:
strong {
font-weight: bold; /* this is the same as 700 b.t.w.*/
}
So, the font in the #font-face rule with font-weight: bold will automatically be selected.
Also good to know: Again according to the w3 consortium, if a requested font style is not found, the user agent can synthesize the requested style from the nearest similar one. But this is 'only' the case for italics and bold as far as I know.
I'm aware of browser differences here.
I'm aware of the "normal" font-weight attribute, even on bold fonts.
I'm aware there's different font generations around.
Regardless all this, each time we convert a bold font, it gets really thicker.
Has anyone experience this? What ways to you have to overcome this?
We normally end up relying on regular (pretending to be "bold") and light (if exists) to work as "regular", to "fix" the look and feel.
Note (update):
We are using fonts that do have a native bold. And that's the issue.
We are NOT adding any "extra bold".
It is called 'faux bold'. If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and italic styles themselves.
These computed shapes are ugly. With italic you get the slanted version of the roman type (while a true italic is a totally different shape concept) and the regular is 'upscaled' into bold. Almost if a border is applied. These computed shapes are a (type) designers nightmare.
More on faux bold: http://alistapart.com/article/say-no-to-faux-bold
You can avoid faux bold by supplying the appropriate fonts. Like this:
#font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
body { font-family:"DroidSerif", Georgia, serif; }
h1 { font-weight:bold; }
em { font-style:italic; }
strong em {
font-weight:bold;
font-style:italic;
}
Read also the article (and how not to define style/weights):
http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/
UPDATE:
You might also experience font-smoothing issues. Which can be fixed with some css:
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I am using a tool to generate automatic CSS, and it generates the following #font-face tag and the corresponding paragraph Style
#font-face {
font-family:FF-Garamond-Italic;
src:url("../fonts/16309_GARAIT (1).ttf");
font-style:italic;
}
p.autoParaStyle3 {
font-family:FF-Garamond-Italic;
font-size:32px;
line-height:40px;
color:#000;
text-align:justify;
}
Notice, that the font specified is already the italic version of the Garamond Font, and technically the line font-style:italic is redundant.
However, as is, this does not work (I tried in FF, Chrome & Safari), and ends up using the default system font instead. If I manually remove the font-style:italic line, then the text is correctly rendered in the Garamond Italic font as expected.
So, I have 2 questions
Why does this not work, meaning why does having a font-style:italic cause it not to work?
Is there a way to "override" the #font-face definition to use font-style:normal via javascript?
The reason I am asking is that I don't control the tool that is generating the CSS above, so cannot touch that file.
Also, I attempted to create a new #font-face in javascript with the same name, but I don't want to specify the "src" again in the index.html, as this file and the css file are further manipulated into different locations - so I want the "src" to be relative to the css file only, and be picked from there.
Thanks in advance!
The setting font-style:italic is not redundant. It specifies that the typeface is italic, and this means that it will be considered a match when an element’s typeface has been set to italic, as it is by default e.g. for i and cite elements.
Thus, the answer to question 1 is that the p element has regular (normal) typeface declared for it, by default, so a regular typeface (here, the default font of the browser) will be used instead.
To solve this, add font-style: italic into the rules for p.autoParaStyle3.
The answer to question 2 is that this depends on the place of the #font-face rule in the DOM. For example, if it is in a style element, you can modify that element’s content with JavaScript. However, you shouldn’t need to ask this question.
(Having an entire paragraph displayed in italic is typographically questionable. You might be solving the wrong problem.)
For those using Create React App, font-face may give different results depending on entry point. This is what I've noticed:
If you choose to link the css file directly to your public/index.html then you can use font-face normally with one font-family and different font-style:
#font-face {
font-family: "FontName"; <---
font-style: normal; <---
font-weight: normal;
src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
#font-face {
font-family: "FontName"; <---
font-style: italic; <---
font-weight: normal;
src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}
/* Usage */
.text {
font-family: FontName;
font-style: normal;
}
.text-italic {
font-family: FontName;
font-style: italic;
}
If you choose to link the css file via Js for bundling, then you need to have a different font-family for all your italic fonts and use normal font-style.
#font-face {
font-family: "FontName"; <---
font-style: normal; <---
font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
#font-face {
font-family: "FontNameItalic";
font-style: normal; <----
font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}
/* Usage */
.text {
font-family: FontName;
}
.text-italic {
font-family: FontNameItalic;
}
So I'm having problems understand why IE is ignoring my CSS here. I have this code:
<h2>Har du stadsnät eller kan du få det?</h2>
I.e. nothing weird or anything.
And here is the resulting rendering:
But here is the CSS code for this HTML:
.rubrik, h2 {
font-family: Lato;
font-size: 32px;
font-weight: normal;
line-height: 38px;
font-variant: normal;
font-style: normal;
color: #969696;
}
Which clearly states that the H2 should have "normal" as font weight, yet the rendered text is clearly bold, here is a correct rendering (from Safari)
So, using the included developer tools of Internet Explorer 8, I inspect the CSS interpretation, and that looks like this:
As I understand it, what I am looking at here is IE8's interpretation of my CSS, and suspiciously missing is the "normal" attribute. IE has converted the CSS to the one-line version of "font" but didn't include the "normal" part. Now, the font "Lato" is a font-face font, and the font-face CSS is here:
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato.eot');
src: local('nofont'), url('/media/fonts/Lato.ttf') format('truetype');
}
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato-Bold.eot');
src: local('nofont'), url('/media/fonts/Lato-Bold.ttf') format('truetype');
font-weight: bold;
}
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato-Bold-Italic.eot');
src: local('nofont'), url('/media/fonts/Lato-Bold-Italic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato-Italic.eot');
src: local('nofont'), url('/media/fonts/Lato-Italic.ttf') format('truetype');
font-style: italic;
}
Even when specifying "normal" in the font-face declaration for font-weight, it doesn't work. So I'm stuck here, trying to figure out what I am doing wrong not to have IE include "font-weight: normal" in the declaration for H2... Any guesses? Thanks in advance...
I think you need to change the name of the font-family: Lato; on each fontface property, as IE is possibly getting confused. Instead try putting font-family: Lato-bold;, font-family: Lato-italic etc. Also, if the font has a bold face (like Lato does and you have referenced in the fontface properties) then you do not need to add font-weight: bold; for a fontface property, as the font is already bold and adding the font-weight will just add faux-bold and make it look bad.
This means that for your h2, you only need to put font-family: Lato; if you want it to be the normal, non-bold version.
This may be an inheritance issue. Have you tried putting the !important keyword.
font-weight: normal !important;