Google Web Fontを使って文字を装飾する

コンテンツのテキスト部分より目立つようにしたい場合に、画像を作成して表現することの多かった見出しやキャッチコピー。
「Google Web Font」を使うと、簡単に豊かなフォント表現が可能。
日本語フォントも増えてきたので使い方をメモ。

「Google Web Font」を使った文字の実装方法

「Google Web Font」のサイト内に用意されているCSSファイルにリンク方法でも実装は可能ですが、追加の度に全てのHTMLファイルを変更するのは大変なので、インポート（@iｍport）を使った方法で実装。

使いたいフォントを検索して、フォントのソースを確認。

サイト内の検索フォームからイメージに近い文字を検索。
希望フォントの詳細ページで「SELECT THIS FONT」をクリック。

下部に表示された「Family Selected」を開き「EMBED」を「@IMPORT」に切り替えて「ソースコード」を確認。

• Google Fonts

CSSを編集してアップロード

文字を変更したいクラスに、前の工程で確認した「ソースコード」を記載。

※下記の参考例は「 Noto Sans JP 」というフォントを使用。

CSS

@import url('https://fonts.googleapis.com/cssfamily=Noto+Sans+JP&display=swap');

.jpn-font{
   font-family: 'Noto Sans JP';
}