Safariの表示フォントを「えり字」に変更する方法

公開:

「えり字」のための CSS書類の作り方

Safariの表示フォントを変更する方法」の「えり字」版です。基本的な流れは同じですがより詳しく説明します。

Safariは、CSS書類(スタイルシート)を使って表示フォントを変えることができます。まず初めに使いたいフォントをMacにインストールしてから、CSS書類を作成し、最後に Safariの設定を行います。

「えり字」をMacにインストール

  1. フォント作者のサイト wemoの「フォント Gallery|えり字」から「えり字」フォントをダウンロードします。
  2. ダウンロードしたフォント・データは、ダウンロード・フォルダの中に入っています。
    Safariの画面の右上隅にある下向き矢印のアイコンをクリックしてダウンロードしたデータを表示させ、ルーペ・アイコンをクリックするとダウンロード・フォルダが開きます
    ダウンロードフォルダを開く
  3. ダウンロード・フォルダにある、「えり字」フォルダをダブルクリックで開くと、その中に4つのファイルがあります
    eriji-font-folder
  4. 「readme.txt」は、フォントに関しての注意事項が書かれているので必ず読みましょう
    readme
  5. 「えり字.otf」をダブルクリックします
    eriji-font-otf
  6. Font Bookが起動して、「えり字」の画面が開きます。画面右下の、「フォントをインストール」をクリックするとインストールできます
    Font Book

インストールが済んだら、ダウンロード・フォルダにある「えり字」フォルダは不要になります(残しておいても大丈夫です)。

Font Bookで フォント情報を調べる

  1. インストール後、Font Bookのフォント情報を見ます
    えり字の情報
  2. フォント情報の PostScript名「ERIJI」を CSS書類のフォントファミリーに指定します
    ERIJI

通常、font-family: には英語のファミリー名を指定しますが、Safariは PostScript名でも大丈夫です。

CSS書類を作る

  1. アプリケーション・フォルダにある、テキストエディットをダブルクリックして起動させます
    テキストエディット
  2. 新規書類を開き、メニューバーの フォーマット > 標準テキストにする を選んで、書類を標準テキスト形式にします。標準テキストでないと、CSS書類として保存できません
    標準テキストにする
  3. *{font-family:ERIJI} と半角英字(英文)で書き込みます。この文字列のコピペでもOKです
    font-family:ERIJI
  4. この書類を保存します
    保存
  5. ファイル名を「eriji.css」にしてCSS書類として保存します(erijiの部分は半角英数字であれば自由です)。この例では書類フォルダに保存していますが、保存場所はどこでも構いません
    eriji-font-css-save-document
  6. 書類フォルダを開くと、CSS書類の「eriji.css」が保存されています
    eriji.css

当サイトより、eriji.css をダウンロードしてご使用いただいても構いません。

Safariの設定

  1. Safariの環境設定を開き、詳細 > スタイルシート > その他... へ進みます
    Safari環境設定
  2. スタイルシート(CSS書類) を選ぶ画面になるので、先ほど書類フォルダに保存した「eriji.css」を選択します。
    eriji.css を指定
  3. 環境設定を閉じたら、CSS書類の設定は終わりです。ウェブサイトの文字が「えり字」で表示されるようになります
    taken.jp
  4. 「えり字」表示をやめて元に戻したいときは、Safariの環境設定を開き、詳細 > スタイルシート > 「未選択」を選びます。

間違いやすく、注意するところ

CSS書類の拡張子

CSS書類の拡張子は、.css

CSSは、Cascading Style Sheets(カスケーディング・スタイル・シート)の頭文字を並べたものです。しーえすえす、です。ファイル名と拡張子は、半角英数字(英語)で書きます。

これが、.ccs や .scc になっているとCSS書類と認識されず設定がされません。

書類アイコンにもCSSと書かれています
eriji.css

テキストは半角英数字で書く

半角英数字以外の日本語文字や記号が混ざっているとダメです。文頭の「*」が「*(アスタリスクの記号)」や「※(こめじるし)」になっていないか、「:」が半角になっているか確認しましょう。

ちなみに、「:」は、「:(コロン)」で「;(セミコロン)」でありません。間違えやすいので気をつけましょう。

視認性を良くするために、空白や改行を入れることもできますが、慣れない場合は続けて書くのが無難です。
eriji.css