Determine if a Google web font has been already loaded

Question

I am building a site that gives users a choice of fonts to apply to their text. I am using Google's web fonts. At present when they select a font via drop down I am using:

 $("head").append("<link href='https://fonts.googleapis.com/css?family=" + FontName + "' rel='stylesheet' type='text/css'>");

This works well. My questions are:

• If the user selects the same font more than once(in the same session) is that font loaded twice?
• And if so is there a way to determine if font X has already been loaded, so as to not reload it?

There are quite a few and I don't think I want to preload them all, just when selected.

Answer 1

The font should be cached by the browser, see https://developers.google.com/webfonts/faq#Many_Fonts_Per_Page

Answer 2

The user's browser should cache the font without you doing anything extra.

Since the font is located in google's server, the caching negotiation happens between google and your user. In other words, you cannot even control it.

So, appending the same the second time, should not lead to the users browser loading it again. Unless, of course, user has disabled caching on their browser.