Aura コンポーネントで Google Fonts を使ってみる

Google Fonts のフォントを Aura コンポーネントから読み込めるか試してみました。

CSP 信頼済みサイトに登録

Google Fonts を使う場合、 font-face が大量に記述されたスタイルシートを読み込む必要があります。これは、https://fonts.googleapis.com 上で提供されており、Aura コンポーネントから読み込むには 設定 > セキュリティ > CSP 信頼済みサイト で事前に登録しておく必要があります。

@ import で読み込む

フォントを読み込む時は、.css ファイル内で Google Fonts が指定する通りに記述すればすぐに使えるようになります。
今回は Great Vibes というフォントを読み込んでみました。

GoogleFonts.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <div>
        <p >A red flare silhouetted the jagged edge of a wing.</p>
        <p class="GreatVibes">A red flare silhouetted the jagged edge of a wing.</p>
    </div>
</aura:component>

GoogleFonts.css

@import url('https://fonts.googleapis.com/css?family=Great+Vibes&display=swap');
.THIS .GreatVibes {
    font-family: 'Great Vibes', cursive;
}

以下が表示結果です。
フォントを指定した <p> タグ内のテキストのみフォントが適用されているのがわかります。