: Googlefonts: Change font only for just one character throughout the website I don't know how this happened, but every instance of the ampersand is in one specific font and style on my website

@Rambettina927

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.



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.



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!

Vote Up Vote Down

@Nimeshi706

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....



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.

Vote Up Vote Down