グーグルフォント webフォントをcssから

テキストを画像で出力するより、文字として出力した方がデザインの綺麗さやSEOの観点からも有力です。cssファイルからグーグルフォントを読み込む方法を紹介します。

グーグルフォントへアクセスして、任意のフォントを検索します。

グーグルフォント

目的のフォントが見つかったら下画像の赤ワクの箇所をコピーし、cssの読込用に書き換えてcssから読み込むようにします。

グーグルフォント Klee One

 css読込用

//フォントファミリー読込
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Roboto:wght@100&display=swap');

// フォントファミリー指定
font-family: 'Dancing Script', cursive;
font-family: 'Roboto', sans-serif;

上のコードのようにcssに読込を行うと任意のフォントを読み込むことができます。