Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #406927

    Hi there,

    Please see a specific portfolio item at my clients website.

    The page has 2/3 column with easy slider and 1/3 column with a header and some text. In the header (h3 class=”av-special-heading-tag” itemprop=”headline”) the client uses an &. For a reason we don’t understand, the font-family and color of the ampersand are automatically changed. The client doesn’t want that.

    In the code I have seen that the theme wraps a span around the ampersand:

    <span class="special_amp">&</span>

    The style used for this class is:

    .special_amp {
        font-family: "Baskerville","Palatino Linotype","Palatino","Times New Roman",serif;
        font-size: 1.3em;
        font-style: italic;
        font-weight: normal;
        line-height: 0.5em;

    Why does this happen and how can it be deleted?

    Thanks & regards,


    Hi Monique ;
    I think that you should use “inhertit” keyword for class=”special_amp
    Here is more details :


    Hi begrafiks,

    Thanks! I realize I can put some quick CSS to change it ‘back’. Although that works with the font-style but not with the color, so it only ‘solves’ half of the problem.

    I also try to understand why – to begin with – the ampersand has been given a special class…?


    It works for the color too if I use !important.

    However, whenever my client want’s to change the colors of his theme, they will again run into the same issue. I believe this should not be necessary.


    Hi Monique ;
    Your heading title is :

    <h3>Maas <span class="special_amp">&</span> Waal – Volkoren tarwe (premix)</h3>

    As I see you’ve added theses lines

    .special_amp {font-family: inherit; font-size: inherit; font-style: inherit; 
    font-weight: inherit; line-height: inherit;  color: #222222 !important;}

    I would do in this way :

    .special_amp { font-family: inherit !important; font-size: inherit !important;
     font-style: inherit !important; font-weight: inherit !important; line-height: inherit !important;  color: inherit !important;}

    Even though you change the color of “h3” in the theme settings it will applied to “special_amp” too.

    • This reply was modified 9 years, 1 month ago by begrafiks.

    Hey Monique!

    Did @begrafiks suggestions work out for you?



    A very good idea begrafiks! Thanks a lot for your effort and time!

    Yes Rikard, it was very helpful. Thank you too.

    Have a nice day :-)

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Font-family and color changes when using & (ampersand) in h3’ is closed to new replies.