CSS Font and Style Switcher (jQuery)

This is a bit of code to add a floating box to your page that will let you switch stylesheets and fonts. I wrote it specifically to start trying out different "themes" and fonts, not to allow the end user to do these things. But the client will be using it to preview.

It's not fully parameterized, nor does it generate the HTML for the selects, so you'll need to hack the code.

I know, it feels incomplete, but my intention wasn't to make a product, but to solve my current problem.

First, you need to alter the LINK to the fonts on googleapis.com so it pulls down the fonts you want. Then edit the SELECT so it has the fonts. Then, edit the fonts array in the Javascript section to it matches up with the SELECT. Then, edit the selectors array in the Javascript section to match the selectors that are used to set fonts. I'm using the PURE library, so this looks a little weird. Whatever library you are using, find out which selectors set the font, and add them to the selectors array. Finally, set a font in the CSS files.

Next, modify the layouts array in the Javascript section to list all the theme CSS files. You should also explicitly link to one of these themes in your HTML HEAD.

The initialization code will try to match up the SELECT values with the CSS font setting and CSS stylesheets that are already active. I did this because i didn't want to explain mismatches to the client.

After the complex init code, the handlers are trivial. They change font settings and swap in theme files.

The attached file ends in PHP, but this is plain HTML code.

font.php_.txt3.48 KB