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

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

2020-06-23

本記事にはプロモーションが含まれています。

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

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

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

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

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

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

OS英語名称日本語名称ウェイト
WindowsYu Gothic游ゴシックLight(※)
Regular
Medium
Bold
MacYuGothic游ゴシック体Medium(※)
Bold
Windows, Macにインストールされる游ゴシックの違い ※デフォルト

スペースが入っていたり入っていなかったり紛らわしいです--;。

MacとWindowsで游ゴシックを差異なく表示するCSS font-family指定

font familyと一緒にfont weightを指定します。

MacとWindowsで微妙に名称が違いがあり、全部指定しないとブラウザによって正しく表示されないため両方指定します。

※WindowsでもWindows8.1とWindows10では見え方に違いがあるようです。

"游ゴシック体", YuGothic は Mac向け
"游ゴシック", "Yu Gothic" は Windows向け

font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-weight:700;

font-weightの値はMacとWindowsを見比べて太めの感じで合わせました。

フォントウェイトを太くしたいくない場合、また游ゴシック以外のフォントも指定している場合はfont-weight:500ぐらいがちょうどいいようです。

font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
font-weight:500;

「游ゴシック」、「YuGothic」、「ヒラギノ角ゴ ProN W3」、「Hiragino Kaku Gothic ProN」、「メイリオ」、「Meiryo」、最後にsans-serifという順で適用されます。

参考Wikipedia 游書体

Safariでは游ゴシックは適用されない

Safari(正確にはBrave、Firefoxの一部も)では個人情報保護のため、ブラウザで表示するローカルフォントはシステムフォント以外は使えなくなっているようです。

Takehiko Onoさんのnoteの内容が非常に参考になりました。
ウェブサイトでローカルフォントの「游ゴシック」はもう使えない

まとめると以下のような内容になるかと思います。詳しくは上記ページを読み込んでみてください。

  • 最新のSafari・Brave・Firefoxでは、プライバシー保護機能によりシステムフォント以外のローカルフォントは使えなくなっている。
  • これはフォント一覧からブラウザを特定する「フォントフィンガープリント」の防止が目的。
  • 「游ゴシック」はシステムフォントではなく「追加ダウンロードフォント」に区分されている。
  • そのため、Safari,Brave, Firefox(プライベートウィンドウ)では「游ゴシック」のローカルフォントとしての利用が制限される。(游ゴシックを指定してもシステムフォントで表示される)
  • Chromeでは引き続きローカルの「游ゴシック」が表示可能。

なるほど、だからMacのディスク容量の空きがなくなると游ゴシックが勝手に無効になってしまうのか。。。と納得しました。
参考記事Macで游ゴシックが消えたときに復活させる方法とダウンロード

SafariとChromeで検証してみる

bodyには以下のようにfontを指定した検証用ページを作成して、ChromeとSafariで確認してみました。

font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;

Chromeでは游ゴシック(YuGothic)でちゃんと表示されています。

Chromeでの見え方

Safariで同じページをみると、Hiragino Sansになっています。

Safariでの見え方

Safariでもウェブサイトに游ゴシックを使いたい場合はWebフォントを利用することになるようです。Webフォントについては後述しています。

Android, iOSでは游ゴシックはない、ではどうする?游ゴシックが使えるWebフォントサービス

さらにスマホ環境について。AndroidやiOSでは游ゴシックはインストールされていないため対応できません。

スマホでも游ゴシックを使いたい場合は、Webフォントの利用を検討した方がいいですね。

游ゴシックが使えるWebフォントサービス

  • Adobe Fonts AdobeCC有料プランを利用中なら無料
  • TypeSquare 無料プランは1書体1ドメイン、1000PVまで
  • REALTYPE 定額500円/月〜 又は従量課金

Adobe Fontsの游ゴシックをWebフォントで使う手順

AdobeFontsの游ゴシックをWebフォントとして使う流れを説明します。使い方は簡単です。

1. 游ゴシックをアクティベートする

Adobe Fontsの游ゴシック体へアクセスし、アクティベートしてライセンスを有効にします。

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 で游ゴシックを見る

以上、ウェブサイトで游ゴシックを使う時に注意すること、 font-familyの指定方法、游ゴシックをWebフォントで使う方法をまとめました。

Safariではローカルフォントの游ゴシックを指定できなくなっているのは残念です。昨今、ネットでのプライバシー保護のために色々と規制が厳しくなっていますがこんなところにも影響があるのかと正直驚いています。

制作現場としては代替フォントを使うか、Webフォントを使うか悩ましいところです。

  • この記事を書いた人
  • 最新記事

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

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