$("a.css-switch").click(function() { //link rel="***"を変える $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); });
h1{ font-size:40px; font-weight:bold; margin:25px; font-family: 'Fredericka the Great','Jim Nightshade', 'Flamenco', cursive; } a{text-decoration:none;color:red;} a:hover{color:#666;}
<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>