LoginSignup
@scivola

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Safari で新規インストールフォントのレンダリング結果を見る方法

Q&A

Safarifont

解決したいこと

Safari で，〈新規インストールしたフォントを font-family に指定した文字列〉がどのようにレンダリングされるか試したい。

ここで，「新規インストールしたフォント」とは「もともと OS にインストールされているものではなく，自分であとからインストールしたフォント」の意味です。

問題点と質問の意図

Safari では，新規インストールフォントを使うことができません。

OS にバンドルされている游ゴシックでさえ，バンドルはされているが元々入っている（組み込まれている？）フォントではないとして扱われ，ウェブに使用できません。

私は，Google Fonts などから入手した手元のいくつかのフォントで，Safari のレンダリングエンジンがどのようにレンダリングするかを確認したいのです。
ウェブサイトで使いたいわけではなく，レンダリングエンジンの動作が知りたいだけです。

もちろん普通には使うことができないわけですが，上記の目的のために制限を回避する簡単な方法が何かないでしょうか，というのが質問の意図です。

追記　2025/03/02

OpenType の GPOS や GSUB といった仕組みは，レンダリングエンジンによって扱いが違っていたりするので，各種のレンダリングエンジンを比較したいわけですが，Safari では実験に使えるフォントが限られてしまうので，どうにかならないだろうか，ということです。

なお，Safari がこのような仕様なのは，フォントフィンガープリントを取得されることがセキュリティー上の問題になる考えてのことのようです。

実験とその環境（2025/03/02 追加）

この節で述べる実験は macOS Sequoia 15.3.1 で行いました。

以下のような HTML ファイルを用意します。

<!DOCTYPE html>
<meta charset="utf-8">
<title>font</title>
<style>body{ font-size: 3rem; line-height: 1 }</style>
<div>(1) Hamburgefons</div>
<div style="font-family: Georgia">(2) Hamburgefons</div>
<div style="font-family: YuGothic">(3) Hamburgefons</div>
<div style="font-family: 'Source Serif 4'">(4) Hamburgefons</div>

英字列を

(1) フォント指定なし
(2) Georgia
(3) YuGothic
(4) Source Serif 4

で表示させるだけです。

このファイルを以下のブラウザーで開きました（ウェブサーバーを介さず，ファイルを直接開きました）。

  • Google Chrome 133.0.6943.142（Official Build） （arm64）
  • Safari バージョン18.3 (20620.2.4.11.5)

その結果が以下です。

Google Chrome:
font-Chrome.png

以下のフォントで表示されました。
(1) Hiragino Kaku Gothic ProN
(2) Georgia
(3) YuGothic
(4) Source Serif 4

Safari:
font-Safari.png

以下のフォントで表示されました。
(1) Times
(2) Georgia
(3) Times
(4) Times

(1) はフォントを指定していないので，違うフォントで表示されて当然です。
(2) は両者とも指定した Georgia でした。
(3), (4) は，Google Chrome では指定されたフォントで表示され，Safari では全て Times になりました。

Safari の (3), (4) のみ指定とは異なるフォントで表示されたわけですが，これは「新規インストールしたフォントは使用されない」という Safari の仕様によるものと考えられます。

なお，Safari の開発ツールであとから (1) に font-family のスタイルを当ててみましたが，HTML に最初から style 属性で指定した場合と変わりありませんでした。

ここまでに登場した五つのフォントについて，以下に情報をまとめます。

  • Hiragino Kaku Gothic ProN
    ver8.26
    OS に元から入っている
  • Times
    Font Book ではこのフォントは出てこないので（Times New Roman は出てくるが別フォント）詳細不明
  • Georgia
    Version 5.00x-4
    OS に元から入っている
  • YuGothic
    17.0d1e1
    バンドルはされているが，OS に元から入っているフォントとはみなされないらしい（というような意味の解説がウェブ上にたくさんあるが一次情報は知らない）
  • Source Serif 4
    Version 4.004
    以下よりダウンロードしてインストール
    https://fonts.google.com/specimen/Source+Serif+4
0 likes

3Answer

itagagaki
@itagagaki

Safari では，新規インストールフォントを使うことができません。

そうなんですか？それが本当ならSafariで確認しようとする意味もわからないですが…
OS、インストールしたフォント、HTML/CSSでのフォント指定方法を質問に書き足してください。

1Like

Comments

  1. @scivola

    Questioner

    具体性に欠ける質問ですみません。
    いろいろ追記しました。
    Safari でふつうに表示できないフォントを Safari のレンダリングエンジンで表示させる方法が知りたい理由も少し言葉を足しました。

  2. @itagagaki

    Google Fonts にだけ関して言えば、ダウンロード＆インストールではなく埋め込みにすればレンダリングできると思います。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet">
    <title>font</title>
    <style>
      body { font-size: 3rem; line-height: 1 }

      .dela-gothic-one-regular {
        font-family: "Dela Gothic One", sans-serif;
        font-weight: 400;
        font-style: normal;
      }
      .source-serif-4-200 {
        font-family: "Source Serif 4", serif;
        font-optical-sizing: auto;
        font-weight: 200;
        font-style: normal;
      }
    </style>
  </head>
  <body>
    <div>(1) Hamburgefons</div>
    <div style="font-family: Georgia">(2) Hamburgefons</div>
    <div class="dela-gothic-one-regular">(3) Hamburgefons</div>
    <div class="source-serif-4-200">(4) Hamburgefons</div>
  </body>
</html>

    なお、私が持っているMacは古いし再整備するのも面倒なので、確認はここで行いました。
    LambdaTest

  3. @scivola

    Questioner

    ありがとうございます。うまくいきました。
    なるほど，これだとフィンガープリントに関係しないので制限が回避できるわけですね。
    Google Fonts が使えるだけでもたいへん役に立ちます。
    おかげで Gecko, Blink, WebKit の差異に関して興味深い知見が得られました。

bismakalander
@bismakalander

Test with a Web Page
Open a webpage and apply the font using developer tools.
Use a local HTML file with CSS specifying the font. frpbypse.com

1Like

Comments

  1. @scivola

    Questioner

    HTML ファイルを Safari で開き，開発ツールでフォントを変えてみましたが，やはり新規インストールフォントは適用されませんでした。

uasi
@uasi

macOS か iOS のネイティブアプリを作って WKWebView でカスタムフォントをロードすれば Safari と同じエンジンで描画されると思います。

1Like

Comments

  1. @scivola

    Questioner

    ありがとうございます。これは技術的に私には無理そうでした。

Your answer might help someone💌

LoginSign Up