游ゴシック体（ゆうゴシック）は、Mac（OSX Marverics以降）、Windows（8.1以降）でもインストールされているため、ウェブサイトでfont familyに設定すればMacやWindowsでみたときに表示の差異がなくなるので（完全にではない）使われることが多いです。
WindowsとMacでの游ゴシックの違い
游ゴシックをfont familyで指定しても見え方がWindowsとMacでは違いが出ます。Windowsではかすれたようなフォントに。
原因は、游ゴシック体の標準のフォントウェイトがWindowsとMacでは違うこと。名称も微妙に異なります。
| 英語名 | Yu Gothic |
| 日本語名 | 游ゴシック |
Windowsでは、游ゴシック体のウェイトは4種類です。
- Light
- Regular
- Medium
- Bold
デフォルトはLightのようです。
Macでは、
| 英語名 | YuGothic |
| 日本語名 | 游ゴシック体 |
- Medium
- Bold
の2種類のみになります。
デフォルトのフォントウェイトはMediumになっています。
MacとWindowsで游ゴシックを差異なく表示するには
font familyと一緒にfont weightを指定します。
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-weight:700;font-weightの値はMacとWindowsを見比べて太めの感じで合わせました。
ちなみに
"游ゴシック体", YuGothic は Mac向け
"游ゴシック", "Yu Gothic" は Windows向け
MacとWindowsで微妙に名称が違いがあり、全部指定しないとブラウザによって正しく表示されないため両方指定します。
※WindowsでもWindows8.1とWindows10では見え方に違いがあるようです。
Android, iOSでは遊ゴシックはない、どうする？
MacとWindowsでは標準でインストールされている游ゴシックですが、AndroidやiOSではインストールいないためCSSでは対応できません。
スマホでのアクセスが多いウェブサイトは代替フォントかWebフォントの利用を検討した方がいいですね。
游ゴシックが使えるWebフォントサービス
- Adobe Fonts AdobeCC 利用中なら無料
- TypeSquare 無料プランは1書体1ドメイン、1000PVまで
- REALTYPE 定額500円/月〜 又は従量課金
Adobe Fontsの游ゴシックをWebフォントで使うには
AdobeFontsの游ゴシックをWebフォントとして使う流れを説明します。使い方は簡単です。
1. 游ゴシックをアクティベートする
フォントページでフォントをアクティベートしてライセンスを有効にします。
Webフォントを使う場合にはWebプロジェクトに追加をクリックします。
2.Webプロジェクトにフォントを追加する
WebフォントはWebプロジェクト単位で管理します。
プロジェクトを新規で作成するか既存のプロジェクトを選択し、作成ボタンを押します。
プロジェクト名は管理上の名前でコード上には表示されません。わかりやすい名前でOKです。
3.生成されたコードをコピーしてHTML、CSSにペーストする
JavaScriptが生成されるのでコードを<head></head>内に貼り付けます。
font-family: yu-gothic-pr6n,sans-serif;
font-weight: 400;
font-style: normal;游ゴシックを利用したい箇所にCSSを適用すれば完了です。
モリサワWebフォント対応のレンタルサーバー
游ゴシックは含まれていませんが、TypeSquareを利用できるサーバーならモリサワの日本語Webフォントが無料で利用できます。（PV、ドメインに制限あり）
どのサーバーも33書体を利用できますが、書体はサーバーによって若干違いがあります。
利用できるフォント：
リュウミン R-KL
リュウミン B-KL
黎ミン M
A1明朝
しまなみ
新ゴ R
新ゴ B
ゴシックMB101 B
見出ゴMB31
中ゴシックBBB
じゅん 201
じゅん 501
新丸ゴ R
秀英にじみ丸ゴ B
丸フォーク M
フォーク M
シネマレター
はるひ学園
G2サンセリフ-B
那欽
竹 B
ぶらっしゅ
トーキング
すずむし
新ゴ シャドウ
教科書ICA M
陸隷
TB古印体
さくらぎ蛍雪
TBUDゴシック R
TBUDゴシック E
UD新ゴ コンデンス90 L
UD新ゴ コンデンス90 M
さくらのレンタルサーバ
で利用できるフォント：
しまなみ
UDデジタル教科書体 R
ヒラギノ丸ゴ W4
リュウミン R-KL
リュウミン M-KL
見出しミンMA31
A1明朝
新ゴ R
新ゴ M
ゴシックMB101 B
見出しゴMB31
ナウ-GM
じゅん 201
じゅん 501
新丸ゴ
フォーク R
フォーク M
丸フォーク R
丸フォーク M
カクミン R
解ミン 宙 B
シネマレター
トーキング
はるひ学園
すずむし
G2サンセリフ-B
新丸ゴ 太ライン
正楷書CB1
隷書101
UD新ゴ R
UD新ゴ M
UD新ゴ コンデンス90 L
UD新ゴ コンデンス90 M
利用できるフォント：
新ゴ R
ゴシック MB101M
ゴシック MB101B
見出ゴ MB31
ヒラギノ角ゴ W2
ヒラギノ角ゴ W6
ナウ-GM
丸ゴシック
じゅん 201
じゅん 501
新丸ゴ R
キャピーN
秀英丸ゴシック L
UD 書体
UD新ゴコンデンス 90 Ｌ
UD新ゴコンデンス 90 M
UD黎ミン R
UD黎ミン B
TB 書体
TBUDゴシック R
TBUDゴシック E
デザイン書体
丸フォーク M
フォーク M
はるひ学園
シネマレター
G2 サンセリフ-B
すずむし
トーキング
ハルクラフト
那欽
筆書体
陸隷
Macで游ゴシックが消えてしまった？場合は
-
-
Macで游ゴシックが消えたときに復活させる方法とダウンロード
MacではOSX 10.9 Mavericks からインストールされている「游ゴシック体（YuGothic）」「游明朝体（YuMincho）」。macOS Sierraからは游教科書体も追加されました ...
続きを見る
