HTML
CSS
フォント
備忘録
Googlefonts

数字だけフォントを変える(Google Fonts)

数字だけフォントを変えたい時、Google Fontsだと簡単にできます。

Google Fonts

https://fonts.google.com/


普通にフォントを指定している時


index.html

<body>

<h1>October 2018</h1>
</body>


今回、Nunito フォントを使用しています


style.css

@import url('https://fonts.googleapis.com/css?family=Nunito');

html {
font-family: 'Nunito', sans-serif;
}


結果

すべてに Nunito フォントがあたります。

スクリーンショット 2018-10-26 23.40.48.png


数字だけ指定したい時

text=0123456789を追加します


style.css

@import url('https://fonts.googleapis.com/css?family=Nunito&text=0123456789');

html {
font-family: 'Nunito', sans-serif;
}


結果

数字のみ Nunito のフォントが当たります

スクリーンショット 2018-10-26 23.48.23.png


Google Fonts の使い方

こちらのサイトがとてもわかりやすいです。

https://saruwakakun.com/html-css/basic/google-fonts