Loading Google Font Stylesheets on the fly for Preview

Background:

We are trying to integrate Google Fonts into an interface we are developing; wh开发者_如何学运维ere users will choose a font, and then get a quick preview of the font.

With Google, you need to load in a stylesheet for the fonts... so we would need to change this whenever the user selects a different font.

Question:

Is is possible to load in a stylesheet on the fly with JS and have the changes be visible to users instantly?

Yes... It's very much possible

example can be found here:

http://www.rickardnilsson.net/post/2008/08/02/Applying-stylesheets-dynamically-with-jQuery.aspx

It is definently possible, as it has been used in the Google Web Fonts Preview extension for Chrome. You might want to have a look at the source code of the extension to see how the author made this work. First, you'll want to install the extension from the link above into Chrome. Then, you'll need to open a folder, depending on your OS:

• XP %UserProfile%\Local Settings\Application Data\Google\Chrome\Profiles\Default\Extensions
• Vista and later %UserProfile%\AppData\Google\Chrome\Profiles\Default\Extensions
• OS X ~/Library/Application Support/Google/Chrome/Default/Extensions
• Linux ~/.config/google-chrome/Default/Extensions

From here, find the identification string for the extension, which is engndlnldodigdjamndkplafgmkkencc. Now you can have a look at the code in the files to get an idea of how you can change the fonts on-the-fly. Just make sure you don't save any changes you make to the file; save them somewhere else on your computer.