Questions about font stacks and Google Fonts

[Carla the Moose]

I'm not all that familiar with how fonts work across different browsers. I know not all computers have the same pre-loaded fonts and that even if they do, different browsers may render them slightly thicker or thinner. And I know that font stacks help preserve how fonts look; for example, if Century Gothic isn't available, someone's browser will grab the next font in the stack, such as Apple Gothic or simply sans-serif.

But can you please clarify how Google Fonts work? My understanding is that you don't really need a font stack when using Google Fonts, because everyone's browser is pulling in the fonts from the same source. Just in case there's a glitch, font stacks would act as a backup, but otherwise Google Fonts are very stable.

Is this true? Is that why the eleven40 theme uses Google Fonts, even for the paragraph/post text? Until switching to StudioPress, I was used to seeing Verdana and Georgia, but they use Google Fonts. It made me think more seriously about the importance of reliable fonts. There is an issue of load time, but it looks like if you use just a few of their fonts, the load time isn't significantly affected.

I'm using Verdana for my posts. I couldn't find a comparable Google Font, but I may have overlooked something. Is Verdana still web safe, or should I choose a Google Font instead?

Thanks!!

[AnitaC]

Brian Gardner wrote a blog about loading Google Fonts here - http://www.briangardner.com/load-google-fonts/. Take a look. The Google Fonts are being pulled via "loading" the fonts from here - http://fonts.googleapis.com.

---

Need help with customization or troubleshooting? Reach out to me.

[Carla the Moose]

Thanks for giving me those links. Brian's post gave me a better way to pull in the CSS from multiple Google Fonts. Someone in the comments suggested doing it like this on our stylesheets: Delius+Swash+Caps|Delius|Handlee ... instead of adding a separate line for each one. This loads them faster as a group.

WC 🙂

[AnitaC]

When you select your fonts over in Google Fonts - you can select more than one font. It's called Add a Collection. For example, if you add 5 fonts to your collection and click the USE button - it will render all of the fonts on one line for you - like so - @import url(http://fonts.googleapis.com/css?family=Alef|Euphoria+Script|Cambo);.

---

Need help with customization or troubleshooting? Reach out to me.

[Carla the Moose]

I've used the font collection feature as a way to gather together fonts I'd like to try. I didn't realize they render them on one line. Thanks for letting me know.

The eleven40 stylesheet came with two Google Fonts, each on a separate line. So I'm changing that to help them load faster. I think when the theme was created, it wasn't yet known that you can load them on one line.

I'm using verdana as my primary text font. Would you agree that it's widely available on different computers and is still considered a safe font? I don't like arial, but I'm trying to come up with a font stack just in case. I've added sans-serif, but I was wondering if you knew of other fonts I could add.

Thank you!

[Author]

Posts