【覚え書き】webフォントを簡単実装!(Google Font.ver)

2019-03-14 13:32

webを作成しているときにアクセントとして、凝ったフォントが使いたくなったら,Google Fontがとても優秀です。
Google Font : https://fonts.google.com/
・オススメfontはこちら

(+)のアイコンからフォントを選択していきます。テキストをクリックすることで詳細を見ることができます。
ウェイトや、斜体などもカスタムできるようです。

気になるフォントを追加し終わったら、HTMLへ組み込んでいきましょう。

このポップアップのボックスの
<link href=・・・を<head>へ
そして、適用したい要素に
font-familyを書いてあげれば完成です。
今回のコード例は下記になります。

<link href="https://fonts.googleapis.com/css?family=Lilita+One|Lora|Muli|Nunito" rel="stylesheet">

font-family: 'Lora', serif;
font-family: 'Muli', sans-serif;
font-family: 'Nunito', sans-serif;
font-family: 'Lilita One', cursive;

多言語対応で、右のLanguagesから言語が選択できるので、これからのインバウンド対応や、多言語サイトの構築にも強い味方ですね。

(Ex) Cyrillic

フォントの例はこちら

『Sawarabi Mincho』:
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

『East Sea Dokdo』:
That Ihatovo’s sloppy wind, the blue skies with coldness at the bottom even in summer, the city of Moreo, adorned with lush forests, and the waves of sublime grass.

『Comfortaa』:
That Ihatovo’s sloppy wind, the blue skies with coldness at the bottom even in summer, the city of Moreo, adorned with lush forests, and the waves of sublime grass.

『namum』:
That Ihatovo’s sloppy wind, the blue skies with coldness at the bottom even in summer, the city of Moreo, adorned with lush forests, and the waves of sublime grass.

『Press Start 2P』:
That Ihatovo’s sloppy wind, the blue skies with coldness at the bottom even in summer, the city of Moreo, adorned with lush forests, and the waves of sublime grass.