Advertisement


Googlefonts: Change font only for just one character throughout the website


Question

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.

2015/11/15
1
3
11/15/2015 10:57:00 PM

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.

2015/11/15
11
11/15/2015 11:43:00 PM