日日是Oracle APEX: Google Fontsを使う

2021年9月3日金曜日

Google Fontsを使う

Oracle APEXを開発しているTim Kimberlさんが、先日のOffice Hour - Deep Dive: Universal theme in APEX 21.1にてGoogle Fontsを使用する方法を紹介しています。

たまに違うフォントを使いたいと思うことはあります。試しにGoogle Fontsに含まれている日本語フォントのNoto Sans JPとNoto Serif JPを使ってみました。以下に行った作業を記載します。

最初にGoogle Fontsのページを開き、使用するフォントを選びます。

https://fonts.google.com/?sort=popularity

言語としてJapaneseを選び、フォント名をNotoで検索しました。Noto Sans JPとNoto Serif JPが見つかりました。

Noto Sans JPを開いて、Regular 400とBold 700を選択しました。確認のためにSelected familyを表示させています。

Browse Fontsのタブをクリックして戻り、Noto Serif JPを開きます。同様にRegular 400とBold 700を選択しました。

CSSよりインポートする場合は、@importの記載を使います。

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap');

フォント・ファミリの名前はそれぞれNoto Sans JP、Noto Serif JPになります。

日本語の記載があるOracle APEXのアプリケーションを開き、フォントを切り替えてみます。開発者ツール・バーからテーマ・ローラーを開きます。

カスタムCSSとして以下を記載し保存します。ベース・フォントをNoto Sans JPに変更します。

/* フォントのインポート */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap');
/* ベースのフォント・ファミリを変更する */
:root {
  --a-base-font-family: 'Noto Sans JP';
}