最近のバージョンのSafariでデフォルトフォントとサイズを指定する

Safari 12以降はこの方法でユーザーが独自に追加したフォントを利用することができなくなりました。システムに含まれるフォント（例えばヒラギノフォントや遊ゴシック、遊明朝、凸版文久フォント、Osakaなど）は利用できると思います。

大抵のブラウザーにはデフォルトのフォントとサイズを指定する設定があります。これらのフォントはHTMLファイルやCSSなどでフォントやフォントサイズが指定されていない場合、ここで設定したフォントとフォントサイズでコンテンツを表示します。

現在のバージョンのSafariには、デフォルトのフォントとサイズを指定する設定はありません。そのため、何も設定していない場合、上記のようなコンテンツを表示した場合、Safariでは明朝体で日本語が表示されます。

これをゴシック体や特定のフォントを使って表示することができます。CSSファイルを作成してSafariでそのCSSを読み込むように設定すれば、定義した設定をSafariに行うことができます。

f:id:ytooyama:20180724214721p:plain

これらの方法は「Safari 明朝体フォント」などのキーワードでWeb検索すると、デフォルトのフォントを指定する方法は多く見つかります。例えばこのような感じです。

a:link{text-decoration:none !important;}
a:visited{text-decoration:none !important;}
a:hover {text-decoration:underline !important;}
    body {
        font-family: 'SourceHanSansJP-Normal';
    }

デフォルトのフォントサイズは上記のコードに次のように一行追加するだけでうまくいきました。

a:link{text-decoration:none !important;}
a:visited{text-decoration:none !important;}
a:hover {text-decoration:underline !important;}
    body {
        font-size: 14px;
        font-family: 'SourceHanSansJP-Normal';
    }

次のHTMLファイルを作成して、Safariにドラッグ&ドロップすると確認できます。上記のCSSファイルを変更後は、一度設定を開いて読み込み直してください。レンダリング結果が変わるのが確認できます。font-size: 14px;のサイズを小さくしてSafariでCSSを再読み込みすると、そのサイズでHTMLが表示されます。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
  <h1>Safariのデフォルトフォントを変更</h1>
    <p>Safariで使用するフォントが指定されていないページにアクセスすると、「明朝体」フォントで表示されます。</p>
    <p><b>CSSファイル</b>で使用するフォントを定義して設定を行うと、フォントが指定されていないページを指定したフォントで表示することができます。</p>
</body>
</html>

フォントサイズのイメージを以下に貼り付けます。

14px

f:id:ytooyama:20180724215616p:plain:w240