ドロップダウンにフォントファミリーを追加する方法

Bricksではフォントの指定方法は、テーマスタイルでグローバルに設定したり、エレメント毎に設定する。その際、ドロップダウンで選ぶか、カスタムフォントをアップロードして設定する。

ドロップダウンに出てくるフォントの追加 #

ドロップダウンで選択したフォントが上書きされ、font-familyはセットではなく単体フォントが設定される。英語フォントと違い、日本語フォントはフォントファミリーをセットで指定できる方がユーザーフレンドリーだろう。

Bricksの設定にあるカスタムコードや、ワードプレスのCSSエディタからbodyのfont-familyは設定できるが、Bricksのページ編集やテーマスタイルのドロップダウンから選べたほうが便利なので、fanction phpに以下のコードを追加。フォントの種類は適時書き換える。尚、重くなるのでgoogleフォントは無効にしている。

add_filter('bricks/builder/standard_fonts', function ($standard_fonts) {
    // ドロップダウンのフォントを置き換える
    $standard_fonts = [
        'Georgia',
        'BIZ UDPGothic',
        'Verdana',
        'Times New Roman',
        'Meiryo, sans-serif',
        'Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif',
        'Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif',
        'Helvetica Neue, arial, Hiragino Kaku Gothic ProN, Hiragino Sans, BIZ UDPGothic, meiryo, sans-serif',
    ];
    
    return $standard_fonts;
});

カスタムフォントについて #

noto-sansなどの日本語フォントをカスタムフォントとして使うのもアリだが、それでも日本語フォントは重いので、基本的に本文はデバイスフォントをfont-familyのセットを使っている。

サブセットやCDNなどで対処も可能だが、デバイスフォントの方が早い。

自サイトでの参考例 #

速度はデバイスフォント＞＞カスタムフォント＞CDN。WP Rocketみたいなキャッシュを使えば、どれも早くなる。キャッシュは設定が難しいものもあるので、注意。

Bricksのfont-familyデフォルト設定（おまけ） #

なにも選択しない場合のデフォルト設定は以下。

font-family: -apple-system,"system-ui",Segoe UI,roboto,helvetica,arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;

-apple-system、 #

macOSやiOSのシステムフォント（San Franciscoなど）

"system-ui" #

Windows用のシステムフォント

Segoe UI： #

roboto： #

AndroidなどGoogle系のフォント。モダンで読みやすく、Google 環境では最適。

helvetica #

美しくプロフェッショナル。Mac 環境では自然に使われる。

arial #

WIｎやMacで広く普及しており、ほとんどの環境で利用可能。Helveticaに似ている、安全牌。

sans-serif： #

何も使えないときの「保険」で、必ず最後に入れておく。何かしらのサンセリフ文字が入る。

Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol #

絵文字用フォント（🧡など）。重くなるので、bricksの設定でオフ推奨。

デフォルト設定のまとめ #

Bricksのデフォルトでは、欧文は、MacならSan Francisco、WinならSegoe UI、AndroidならRobotoというようにシステム系のフォントが使われることになる。

日本語は環境の違いによって自動的に選ばれる。