【CSS】inputのフォントを変更する〜font-family: inserts; が効かない時の対処法〜

font-family: inserts; が効かなくて困った
1. 記述したコード
2. 表示結果
inputのフォント変更には !importants を使う

font-family: inserts; が効かなくて困った

inputのフォントを変更したく、
CSSで「font-family: inserts;」を指定しましたが何故か反映されません。

記述したコード

<input type="text" name="key" placeholder="キーワード検索">

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

body {
	font-family: 'Noto Sans JP', sans-serif;
}

input {
	font-family: inserts;
}

表示結果

親要素のbodyなどでフォントを指定したとしてもinputやbuttonには、継承されないようです。

そんな時は以下の方法をお試しください。

inputのフォント変更には !importants を使う

「!importants」を使って強制的にフォントを指定してあげましょう。

記述したコード

<input type="text" name="key" placeholder="キーワード検索">

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

input {
	font-family: 'Noto Sans JP', sans-serif !important;
}

表示結果

作例

See the Pen Untitled by asbgm (@asbgm12) on CodePen.

Google Fontsでのフォント変更方法については以下の記事で紹介していますので是非ご覧ください。