Chaz DeSimoneI don't know how this happened, but every instance of the ampersand is in one specific font and style on my website (something like Times Roman italic). My site is all about ampersands, so this is most appropriate. But I have no idea how all the ampersands got replaced with just one font and style. I'm using a couple Googlefonts for most of the text, but the ampersand is from one particular font no matter where it appears.

You'll see it at http://amperart.com

Months ago it appeared all of a sudden as a fancy, curly ampersand (like Garamond Italic) everywhere on the site, which was really cool so I just left it -- "if it ain't broke don't fix it" -- but now it's just a roman slanted ampersand. I would like to get the other one back, since the fanciness is appropriate. Of course, I'm also just curious how just one character can be changed to a particular font and style throughout a website. (The size adjusts to the surrounding type size.)

Really baffled on this one. Have searched everywhere else. You people are the greatest. (I'm I typographer from the days of pying - "spilling" for the kids who never heard the term - hand-set type all over the shop floor, but when it gets "pied" in a website I'm lost.)

Thanks & thanks again.


2 Answers 2


This part of your code...

.amp {
    font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif;
    font-weight: normal;
    font-style: italic;
    font-size: 1.1em;
    line-height: 1em;

Control the ampersands.... Watch the ampersands change as I toggle that CSS on and off....

enter image description here

If you want to change their font, change that CSS property. Since none of the fonts indicated in the CSS are "safe" cross-platform fonts, or web fonts, they are entirely dependent upon what fonts a user has active on their system.

In short, you've got ampersands set to display in any one of 6 fonts depending upon what the user has on their system. You aren't really controlling them to a great degree.

I presume all ampersands are wrapped in a span with a class because you want to control them more.

  • Can't argue with that!
    – SaturnsEye
    Nov 16, 2015 at 10:56

Scott explained the "why"; it's because you're using fonts that not every user have on their computer. Not only you noticed a difference but you'd probably notice more difference if you'd try a few different platforms.

That's how it looks like for me:

Your text is in Georgia and the ampersand is using Baskerville (for me) but could use "Goudy Old Style","Palatino","Book Antiqua","Warnock Pro"!


It's easy to fix, you even have a css class for the ampersand alone; you'll only need to change it in your stylesheet once and it will get updated everywhere.

If you want it to appear always the same for everybody, you can change your css class ".amp" to a webfont you like. OR simply remove the specified fonts for that .amp if you want it to use the same as the rest of the body or your default site font.

google fonts suggestions

What you need to use:

Even if you used a Google font, you still need to point to your site where it will find it. Otherwise the font won't work. It's not recommended to use a lot of webfonts. I don't know what others' standard is, but using 2-3 should be alright.

install google fonts

Even if you use "safe font", they too have some difference between them and some are only mac or pc. If the user has none of the fonts you suggest, the "default sans serif" will be used and this can be Tahoma or Geneva or "sans-serif" (eg. maybe even end up with arial) for example; you won't have control on which one. Make sure the equivalent are added to your css.

Since you're a typographer you might want to control this aspect!

PS: Is it YOUR head on the ampersand image? Best "bio" picture ever!

Your Answer

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

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