CODEWITHSUNDEEP
javascriptjqueryfonts
Markus Schober
Markus Schober

Reputation: 348

Loading Google Font Stylesheets on the fly for Preview

Background:

We are trying to integrate Google Fonts into an interface we are developing; where 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?

Upvotes: 1

Views: 812

Answers (2)

kirb
kirb

Reputation: 2049

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.

Upvotes: 0

Breezer
Breezer

Reputation: 10490

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

Upvotes: 2

Related Questions