Webフォントを使ったページで、Javascriptで別のフォントを後から読み込んで適用することでテキストのフォントをその場で変えちゃう実装です。
※jQuery使ってます！
まずは、<head>の中に、書き換え用の<style>を記述します。
<style id=”photo_style”></style>
ここの中身を書き換えて、ページで使うCSSに追加します。
以下がフォントの読み込み記述です。
$('#photo_style').before("<link href='http://fonts.googleapis.com/css?family=Fascinate' rel='stylesheet' type='text/css'>");
$('#photo_style').text('a {font-family: "Fascinate", cursive;}');
今回のポイントは
・<link>を追加しないと読み込まない
・.append()で下に追加でも、.text()で書き換えでも動作
・http://fonts.googleapis.com/ が吐き出す内容を直接書き出しても、フォントが読み込まれない。
です。
以下、別パターンでの動作結果です。
（※iOS5, 6 と Android2.3, 4.0で検証）
$('head').append("<link href='http://fonts.googleapis.com/css?family=Fascinate' rel='stylesheet' type='text/css'>");
$('#photo_style').text('a {font-family: "Fascinate", cursive;}');
⇒ ○ 動作する (<head>に<link>を追加、記述が後でも読みこまれる）
$('#photo_style').append('@charset "utf-8";@import url("http://fonts.googleapis.com/css?family=Fascinate");');
$('#photo_style').append('a {font-family: "Fascinate", cursive;}');
⇒ ×（cssにimportで追記では動作せず）
$('#photo_style').append('@font-face {font-family: "Fascinate";src: local("Fascinate"), local("Fascinate-Regular"), url(http://themes.googleusercontent.com/static/fonts/fascinate/v2/NnlsYos1... format("woff");}');
$('#photo_style').append('a {font-family:"Fascinate", cursive;}');
⇒ × AndroidでFont読み込まず（cssにWebFontの記述を追記では読み込まれず）
他にも方法あるかも。
_
