じゃがーノート

広告がないうちはどこかで生きています

Safari で任意のデフォルトフォントを指定する

Safari でデフォルトフォントとして明朝体が表示される動作を自分好みに調整した話です。

経緯

Safari で明朝体が表示される

Web サイトにて何もフォントが指定されていない場合、Safari は明朝体で表示します。

フォントが何も指定されていない場合はどのフォントで表示するかを定義したスタイルシートを自前で用意し、Safari の環境設定で設定するとこの動作を変更できます。

f:id:id459547:20210811090320p:plain
Safari スタイルシート設定画面

ですが、セキュリティ強化の一環で、ユーザーがローカルにインストールしたフォントは Safari から参照しなくなりました。

qiita.com

解決策

Web フォントを参照させる

ただし、Web フォントなら参照してくれるようなので、任意のサーバーに設置した Web フォントで描画するよう指定したスタイルシートを作成してみました。

Safari.css

@charset "UTF-8";

/* Web フォント読み込み */
@font-face {
    font-family: '任意のフォント名';
    src: url('https://URL-to-WebFonts.woff2') format('woff2'),
    url('https://URL-to-WebFonts.woff') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: '任意のフォント名';
    src: url('https://URL-to-WebFonts.woff2') format('woff2'),
    url('https://URL-to-WebFonts.woff') format('woff');
    font-weight: 700;
}

/* デフォルトフォント設定 */
* {
    font-family: (英字フォントを指定する場合はここに), 任意のフォント名;
}

/* フォント置き換え */
@font-face {
    font-family: '置き換えるフォント名';
    src: url('https://URL-to-WebFonts.woff2') format('woff2'),
    url('https://URL-to-WebFonts.woff') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: '置き換えるフォント名';
    src: url('https://URL-to-WebFonts.woff2') format('woff2'),
    url('https://URL-to-WebFonts.woff') format('woff');
    font-weight: 700;
}

「フォント置き換え」セクションは、特定のフォントを任意のフォントに置き換える場合に使用します。

スクリーンショット

適用前

f:id:id459547:20210811104029p:plain
スタイルシート 適用前

適用後

f:id:id459547:20210811104033p:plain
スタイルシート 適用後