CODEWITHSUNDEEP
cssfontstypography
shadox
shadox

Reputation: 3729

Font family and font weight - very thick bold

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.

Upvotes: 1

Views: 2709

Answers (2)

Ulrich Schwarz
Ulrich Schwarz

Reputation: 7727

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

Upvotes: 1

Jon Kyte
Jon Kyte

Reputation: 2020

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.

Upvotes: 0

Related Questions