cssを変更するボタン

Result

jQuery

$("a.css-switch").click(function() {
    //link rel="***"を変える
    $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
});

css

h1{
    font-size:40px;
    font-weight:bold;
    margin:25px;
    //Google font API
    font-family: 'Fredericka the Great','Jim Nightshade', 'Flamenco', cursive;
}

a{text-decoration:none;color:red;}
a:hover{color:#666;}

html

<a href="javascript:void(0);" class="css-switch" rel="default.css">Default </a> | 
<a href="javascript:void(0);" class="css-switch" rel="http://fonts.googleapis.com/css?family=Fredericka+the+Great">Fredericka the Great</a>  | 
<a href="javascript:void(0);" class="css-switch" rel="http://fonts.googleapis.com/css?family=Jim+Nightshade"> Nightshade</a> | 
<a href="javascript:void(0);" class="css-switch" rel="http://fonts.googleapis.com/css?family=Flamenco:300"> Nightshade</a>
<h1>Sample</h1>