CODEWITHSUNDEEP
htmlcss
Niyaz
Niyaz

Reputation: 54793

How to give different font for all bolded text in html?

I don't think there is an easy way to do this, and it looks like a shortcoming in CSS to me.

Anyway here is the problem:

I want to use a different font for all the bold text in my web page.

For example, take look at the following markup:

<span>Hello</span> <strong>world</strong>

and the CSS:

span { font-weight: bold }

Now is there an easy or recommended way to get both the bolded words (the one using the tag and the one using the css rule) to be using a different font?

Something like:

*[font-weight:bold] { font-family: 'Comic Sans'}

Edit:

What I want is to have a global option of setting font for all bolded text in the page. Given that normally CSS files tend to get bigger in size over time, giving a special class for all places where bold text is used is not a feasible solution.

Upvotes: 3

Views: 5004

Answers (5)

Yoann
Yoann

Reputation: 5077

In your code all the span are bold why you don't just change the font-family of the span tag ?

change your html to

<span>Hello <strong>world</strong></span>

and your css to 

span {font-weight:bold;}
strong {font-family:'Comic Sans';}

You can also use the strong tag, it the perfect tag to use bold text. http://www.w3.org/wiki/HTML/Elements/strong

Upvotes: 1

Jared Farrish
Jared Farrish

Reputation: 49188

It involves a little lying, but this seems to work in Firefox 13, Chrome Latest, Opera 11.64, and even IE9:

<h1>This is Bold!</h1>
<p>This is <span id="bold">text</span> that is <strong>bolded</strong>.</p>
<p>Something <span style="font-style: italic;">here</span> is <i>Italicized</i>!</p>

@font-face {
    font-family: 'Merriweather';
    font-weight: regular;
    src: local('Unkempt'), url('http://themes.googleusercontent.com/static/fonts/unkempt/v4/MsFMwD9wD1OCzqw3trD0PA.woff') format('woff');
}
@font-face {
    font-family: 'Merriweather';
    font-weight: bold;
    src: local('Merriweather Bold'), local('Merriweather-Bold'), url('http://themes.googleusercontent.com/static/fonts/merriweather/v4/ZvcMqxEwPfh2qDWBPxn6nnl4twXkwp3_u9ZoePkT564.woff') format('woff');
}
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  src: local('Cousine Bold Italic'), local('Cousine-BoldItalic'), url('http://themes.googleusercontent.com/static/fonts/cousine/v4/y_AZ5Sz-FwL1lux2xLSTZXhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}
* {
    font-family: 'Merriweather', serif;
}
strong, #bold {
    font-weight: bold;
}

http://jsfiddle.net/userdude/vF9Qr/4

Upvotes: 5

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201548

It’s a design feature, not a shortcoming, of CSS that properties work independently of each other, except where otherwise indicated in CSS specifications. There is no way to couple two properties together. Even if you set them in the same rule, as in .foo { font-weight: bold; font-family: Awkward }, they act independently (and either of them, or both, could be overridden by other style sheet rules).

So you just have to design your use of markup and CSS so that that uses a specific font for all bold text, if that’s what you want. (It’s typographically very questionable and makes me wonder what design error caused that assumed need.) Note that in general browser style sheets can bold whatever they want to, and they typically want to bold heading elements and th elements, among others. So if you wanted to prevent anything from getting bolded except on your command, you would start with * { font-weight: normal; }.

Upvotes: 1

Ian Devlin
Ian Devlin

Reputation: 18870

I don't see the problem here? Since the emboldened text will be contained either within a b or strong element (depending on your markup), you can simply target that with a font-family rule?

Upvotes: 0

Nikola Bogdanović
Nikola Bogdanović

Reputation: 3213

Add a class to the span (Bold), not a style, and just do this:

span.Bold { font-weight: bold }
strong, span.Bold { font-family: 'Comic Sans' }

Upvotes: 0

Related Questions