14
<span class="bold">Some Title</span>
.bold
{
    font-weight:bold;
}

This renders boldly, however this:

<strong>Some Title</strong>

Does not. It just renders as regular text. I'm using the HTML5 doctype and the Google font:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans&v2' rel='stylesheet' type='text/css'>

Anyone experienced this as well?

Edit: BoltClock suggested it might be CSS reset, here's the chunk for <strong>

/** CSS Reset **/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
4
  • Do you happen to have a CSS reset that forgot to "reset" styles for strong?
    – BoltClock
    Jul 25, 2011 at 9:00
  • If you are trying this in jsfiddle uncheck Normalized CSS Jul 25, 2011 at 9:02
  • @Bolt yes I am! But I'm not sure how this would interfere?
    – Tom Gullen
    Jul 25, 2011 at 9:03
  • I posted an answer to explain.
    – BoltClock
    Jul 25, 2011 at 9:05

5 Answers 5

51

If there is nothing else for strong, then there's your problem (or rather, the CSS reset's problem).

The font: inherit style, together with all those selectors, is asking everything to inherit every font style from its parent. The default weight is, obviously, normal, so strong text is no longer bold until you redeclare it:

strong { font-weight: bold; }

(Some other obvious elements to reset styles for are b, em, i, code elements, quote elements, tables, headings, lists, etc.)

1
  • 2
    tl;dr inherit means inherit from parent element, not inherit browser defaults
    – BoltClock
    Jul 25, 2011 at 9:07
10

add:

strong{
 font-weight:bold;
}

to your CSS. Maybe somewhere you reset this tag.

1

Those resets are reseting not just padding and margins, as BoltClock explained, font:inherit can break your browsers deafault behaviour with displaying proper fonts style.

0

In addition to BoltClock's answer, I also found out that we must use the complete tag names for closing the tags, otherwise the STRONG tag used afterwards doesn't work. For example,

<H1> heading </H1>

instead of,

<H1> heading </>

4
  • Is the situation where </> is actually valid? Genuinely curious
    – Chris
    Nov 9, 2015 at 9:54
  • looks like they are not valid. stackoverflow.com/questions/3558119/…
    – vikrant
    Nov 9, 2015 at 11:03
  • I think that question is discussing self closing such as <img /> - I was curious about the use of </>
    – Chris
    Nov 9, 2015 at 11:32
  • </> or <img/> is not valid, according to the specs, but the browser still renders it. it should be like this: <img> </img>. it is under the section "end tags" have a look: w3.org/TR/html5/syntax.html#void-elements
    – vikrant
    Nov 10, 2015 at 14:10
0

For me the issue was Angular Material .mat-option class, for some reason using <b> or <strong> didn't work with their font. Changing their font to another one solved the issue for me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.