WEB Tips デザイン・コーディング

ウェブサイトで游ゴシック Yu Gothicを使う時に注意すること

ウェブサイトで游ゴシック Yu Gothicを使う時に注意すること

游ゴシック体(ゆうゴシック)は、Mac(OSX Marverics以降)、Windows(8.1以降)でもインストールされているため、ウェブサイトでfont familyに設定すればMacやWindowsでみたときに表示の差異がなくなるので(完全にではない)使われることが多いです。

WindowsとMacでの游ゴシックの違い

游ゴシックをfont familyで指定しても見え方がWindowsとMacでは違いが出ます。Windowsではかすれたようなフォントに。

原因は、游ゴシック体の標準のフォントウェイトがWindowsとMacでは違うこと。名称も微妙に異なります。

英語名Yu Gothic
日本語名游ゴシック
Windowsの游ゴシック

Windowsでは、游ゴシック体のウェイトは4種類です。

  • Light
  • Regular
  • Medium
  • Bold

デフォルトはLightのようです。

Macでは、

英語名YuGothic
日本語名游ゴシック体
Macの游ゴシック
  • 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では見え方に違いがあるようです。

参考Wikipedia 游書体

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を適用すれば完了です。

Adobe Fonts で游ゴシックを見る

モリサワWebフォント対応のレンタルサーバー

游ゴシックは含まれていませんが、TypeSquareを利用できるサーバーならモリサワの日本語Webフォントが無料で利用できます。(PV、ドメインに制限あり)

どのサーバーも33書体を利用できますが、書体はサーバーによって若干違いがあります。

エックスサーバー

全プラン(スタンダード・プレミアム・ビジネス)で利用可能
利用可能なドメイン 3ドメインまで(サブドメインも含む)
75,000PV/月まで

利用できるフォント:

リュウミン 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

さくらのレンタルサーバ

スタンダードプラン以上で利用可能
利用可能なドメイン 3ドメインまで
75,000PV/月まで、ビジネスプラン以上は上限なし

さくらのレンタルサーバ 利用できるフォント:

しまなみ
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

ConoHa WING

全プラン利用可能
利用可能なドメイン 3ドメインまで
75,000PV/月まで

利用できるフォント:

新ゴ R
ゴシック MB101M
ゴシック MB101B
見出ゴ MB31
ヒラギノ角ゴ W2
ヒラギノ角ゴ W6
ナウ-GM
丸ゴシック
じゅん 201
じゅん 501
新丸ゴ R

キャピーN
秀英丸ゴシック L
UD 書体
UD新ゴコンデンス 90 L
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からは游教科書体も追加されました ...

続きを見る

今月キャンペーン特典があるサービス

  • エックスサーバー
    月額費用が最大35%キャッシュバックの693円&ドメイン永久無料 - 2023年6月9日(金)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額687円 52%OFF - 2023年6月13日(火)16:00まで
  • カラフルボックス
    .jp取り扱いスタート。BOX2以上の月額費用が25%OFFのクーポンコード「SERVER25

-WEB Tips, デザイン・コーディング
-,