Unable to style font of span within an heading element


I’m trying to style the ampersand here to be a nice Baskerville italic font, as I have done with the span within the <p>. It’s not working. Here’s the html snippet & css:

<!DOCTYPE html>
<html lang=“en”>
<meta charset=“UTF-8”>
<title>AMP test</title>
<link rel=“stylesheet” href=“test.css”>
<p>Articles <span class=“amp”>&</span> Events.</p><!-- Works fine –>
<h1>Articles <span class=“amp”>&</span> Events.</h1><!-- Font does not change –>

font-family: Baskerville;
font-style: italic;
font-size: 220%;
background-color: green;

I stuck the rather crude green background in there to check that CSS was indeed being applying to the span inside the H1 - which it is. Just refuses to change the ampersand to the nice one!

Is there a quirk whereby you cannot amend this type of property inside a heading? Seems really strange to me.

Thanks in advance of any help!


Personally I cannot see the difference other than the obvious emphasis inherited from the H1.

The ampersand in both should look like it does for the span within the paragraph tag - it doesn’t style that way in the h1. The font-family: Baskerville and font-style: italic are being overridden / ignored.

  • I’ve checked it in Safari, Firefox, and Chrome - same issue across all three.

it’s the font itself. It doesn’t have a usable “bold” state, so its getting replaced by the default serif. add this to your .amp rule :


hope that helps…

I checked it, and saw that the size of the ampersand is 220% of the fonts in the parent elements of the “span”.

Dresden, if someday I ever make it over to Rockford, Illinois I will buy you a beer Sir! :slight_smile:

Thank you very much, that was indeed the problem (which has been driving me nuts for the past few hours!)

Much appreciated, cheers!