【Vivaldi】タブとかブックマークのフォントを変更する方法

カスタムCSS

Vivaldiのアイコン

この記事では、VivaldiブラウザのオリジナルカスタムUI機能を使って、ブラウザの外観のフォントを変更するCSSについて書きます。

本記事は、オリジナルカスタムUIが有効になっている前提です。詳しくはこちらを参考にしてみてください。

Vivaldiブラウザのシステムフォントを「ゆずポップ」に変更した画面

本記事で紹介するCSSを使うことで、ブラウザUIのフォントを変更できます。ご自身のOS(僕の場合Windows)にインストールしているフォントなら、どれでも適用可能です。

フォントだけでなく、太さも調整可能です。

2022年7月現在、Vivaldiブラウザには、ウェブページのフォントは設定→ウェブページから変更できます。しかし、ブラウザ自体のフォントは変更できません。パネル、設定画面、アドレスバーなどです。

少々めんどくさいですが、CSSを使うことで変更できます。

ネットで調べると、Vivaldiがインストールされている場所にある「common.css」を弄るといいよ~んと書かれていましたが、ちょっと方法がめんどくさいです。

確かにこちらの方法でも変更できましたが、変更箇所が数か所あったりと手間です。また、Vivaldiのファイルを直接弄るので、アップデートの影響で、上書きされる可能性もあります。上書きされると、再び同じ作業をしないといけません。

カスタムCSSの場合は、アップデートで上書きされる心配はありません。

本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。まだ有効にしていないという方は、以下の記事を参考にしてみてください。

VivaldiブラウザのUIフォントを変更する手順

書き込むコード

作成したカスタムCSSのファイルをメモ帳なり、Visual Studio Codeなりで開きます。

以下のコードを書き込みます。

/*フォント変更*/
* {
  font-family: 'フォント名' !important;
}

「フォント名」の部分に、自分が指定したいフォント名を書きます。ここの指定方法を間違えると、正常に反映されないので注意です。フォントのインストール・フォント名の書き方は、こちらで詳しく解説します。

例えば、フリーフォントの「ふい字」を指定したい場合、以下のようになります。

/*フォント変更*/
* {
  font-family: 'ふい字' !important;
}
フォント変更のコードを書き込んだVisual Studio Code画面
ポイント

フォントによっては、細くて、ブラウザで見るには不適切な場合があります。この場合は、フォントの太さを指定してあげましょう。見やすくなります。

太さを指定する場合は、以下のコードになります。

/*フォント変更*/
* {
  font-family: 'フォント名' !important;
  font-weight: 700; /*任意の太さ*/
}

「font-weight」ですね。ポイントですが、太さは100刻みになっています。「150」などの数値は指定できません。「500」、「600」、「700」といったように100単位で指定します。700くらいがいい感じの太字になります。

正常に変更されているか確認する

ブラウザを再起動します。無事に、タブなどのブラウザのシステムフォントが変わっています。(例:ふい字)

Vivaldiのタブ名のフォントをふい字にした画面

設定画面にも反映されます。

Vivaldiの設定画面をふい字にした画像

メモパネルにも反映されています。

メモパネルをふい字にした画像

アドレスバーの検索候補も同様です。Vivaldi内の全てのUIに反映されています。

アドレスバーの検索候補をふい字にした画像

フォントのインストール

Windowsにデフォルトでインストールされているフォントの中で、いいフォントがなかった場合は、インターネットからフリーのフォントを入手してみましょう。

「フリーフォント おすすめ」、「見やすい フリーフォント」とかで、色々綺麗なフォントが出てきます。

試しに、「ゆずポップ」というフォントを入手してみたいと思います。どのフォントも一緒の手順です。以下のサイトからダウンロードできます。

「YuzuPopAM_ver060.zip (66251 ダウンロード)」をクリックします。

黒柚にゃんと有限世界の妖精たちのブログ - フリーフォント – ゆず ポップ シリーズ

ダウンロードできたら、圧縮ファイルになっているので解凍します。

ダウンロードしたYuzuPopAM_ver060ファイルを解凍する

展開したフォルダー内にある「ttf」拡張子を選択して、右クリック→インストールをクリックします。フォントによっては、異なる太さを収録しているため、複数のttfファイルがあります。

展開したフォルダー内にある4つのゆずポップttfファイルをインストール

これで、インストールが開始されます。すぐ完了します。

ttfファイルの名前は、そのままフォント名になっている場合が多いので、ファイル名をコピペすると、簡単にfont-familyに指定できます。ってか、ファイル名がフォント名になるのですかね…?素人なのでさっぱりです。いちいち、手動でフォント名を入力しなくて済みます。

基本的には、フォント名がそのままファイル名になっているので、コピペすることでfont-familyに指定できる

フォント名の調べ方

僕は、Macを持っていないので、Windowsの調べ方を書きます。スタートメニューの検索ボックスに「フォント」と入力して、コントロールパネルのフォントを開きます。

スタートメニューの検索→フォント

お使いのPCにインストールされているフォントが一覧表示されます。僕は、QTTabBarを使っているので、コントロールパネルのUIがおかしいですが、気にしないでください。

こちらの一覧に書かれている名前が、フォント名です。上部の「プレビュー」をクリックすることで、大画面でフォントが表示されます。こちらの画面内にある「フォント名」からでも確認できます。

コントロールパネル コンピューターにインストールされているフォントをプレビュー、削除、表示または非表示にします
余談

Windows11の場合、設定→個人用設定→フォントからでも確認できます。

Windows11の設定→個人用設定→フォント

コピペできればいいんですが、名前のコピペはできません。めんどくさいですが、手動で「font-family」に指定しましょう。半角空白などもきちんと入力します。

インターネットから入手したフォントについては、インストールする時のファイル(ttf)の名前をコピペできます。

今回、僕が入手した「ゆずポップ」のフォント名は、「ゆず ポップ A [M] Regular」でした。こちらをVivaldiに適用する場合、以下のコードになります。デフォルトだとちょっと細かったので、太くするコードも書いています。

/*フォント変更*/
* {
  font-family: 'ゆず ポップ A [M] Regular' !important;
  font-weight: 700;
}

これで、Vivaldiちゃんのシステムフォントが、ゆずポップになります。可愛らしいです。普通に好き系のフォントでした。飽きるまで使ってみようと思います。

メモパネルをゆずポップにした画像

感想

以上、VivaldiのシステムフォントをCSSで変更する方法でした。

カスタムCSS、楽しいですね。

Posted by ナポリタン寿司