日本語の中でも美しいフォントとされる「游ゴシック体」、略して「游ゴ」。「遊ゴシック」と書かれている時もありますね。
Webデザイナーにも評判のサンセリフフォントの一つです。
先日弊社のデザイナーと共に女性向けメディアを作成する際、
游ゴシック体を使用したサイトの作成を行いました。
PCのインスペクターモードで一通りの確認をパスし、
実機確認に移ったところデザイナーから...
「iPhone、Android 両実機でフォントが違いま〜す」
あれ？
CSSで正しい font-family を設定したのになぁ...
という事があり、どうやったらスマホで游ゴシック体がきちんと出せるのか調べてみました。
Windows&Macではきちんと出せる「游ゴシック体」
游ゴシック体は「Windows」、「OSX」の２大PC向けOSにプリインストールされています。
両OS間には、デフォルトの font-weight: 400
で表示されるフォントの太さに違いがあるという頭を悩ませる問題があるものの
フォント自体は下のCSSで表示する事ができます。
html, body {
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic";
}
AndroidやiPhoneにはプリインストールされていない「游ゴシック体」
「OSX」や「Windows」でプリインストールされているなら
「Android」や「iOS」でも...
と思いたいですが
残念ながらこの２大スマホOSには游ゴシック体がインストールされていません。
OSXに入っているのにどうしてiOSに入っていないのかは謎です。
ですので、上記のCSSだけでは全てのスマートフォンで游ゴシック体を出すのは不可能です。
スマホで「游ゴシック体」を使うには有料のWebフォントを使用する
では、どうすればいいのかというと
https://www.realtype.jp/
から有料のWebフォントとして游ゴシック体を使うのが現実的です。
フォント一覧ページから「游ゴシック体」で検索すると使用できるのが確認できます。
値段は月500円〜1000円です。
事実、游ゴシック体を作成している字游工房様のサイトも
上のサイトのAPIを経由してフォントを表示していました。
http://www.jiyu-kobo.co.jp/
導入は HTMLに
<!-- XXXXXの部分に自分のID。YYYYYの部分に落としてきたい日本語(絞り込まないと時間がかかる) -->
<style type="text/css" id="RT_ID_YuGothicPr6NM">@font-face {font-family:'YuGothicPr6NM';src:url("http://api.realtype.jp/1/font?id=XXXXX&name=YuGothicPr6NM&text=YYYYY&type=woff&format=woff");}</style>
CSSに
html, body {
font-family: 'YuGothicPr6NM';
}
という形で実装ができます。
詳しくはRealtype様のドキュメントを確認してください。
まとめ
Windows、OSXの両PC向けOSで游ゴシック体がデフォルトで使えるようになったのもここ数年の出来事の為か、
「游ゴシックがWebサイトでも使える！とってもハッピー！」といった記事や
最初に記したCSSで表示が出来ると唄っている記事をたくさん見かけます。
が、最近のWebサイトの閲覧者はほとんどがスマホからの流入です。
游ゴシック体を使った美しいデザインも
正しくスマホで表示出来るようしていなければ大半のユーザーに届きません。
Webフォントを使うための月々のコスト、Webフォントが適用されるまでのチラツキや遅延
など考えることも多いですが、正しく「游ゴシック体」を使ったサイトが増えていくといいと思います。