@font-face の使いかた

@font-faceをCSSに書くことで、ページ内で好きな文字を使うことができる。

目次

フォントを登録しよう

CSSの上部に書いてあげる

/* フォントを登録 */
@font-face {
  font-family: '名前';/* フォント名は自由につけられる */
  /* パスを指定 */
  src: url('フォントのある場所');
 /* 読み込めない場合は、代替フォントを表示して */
 font-display: swap; 
}


srcで読み込みをしたファイルたちは、’任意の名前’で呼び出せる。

font-display: swap; について

指定したフォントが読み込み中で、表示されるまでの間、代替フォントを適用
font-familyでカンマ区切り指定しておくと、2つ目、3つ目のフォントを仮で表示しておいてくれるというもの


定義したら、この文字を適用させたい要素に今つけた、font-family: ‘名前’;を指定

p {
/*-- '名前'が読み込めない場合のために代替フォントをカンマ区切りで用意 --*/
  font-family: '名前', sans-serif;
}

好きなフォントにしてみよう

@font-face {
/* txt-bold と名付けました。*/ 
  font-family: "txt-bold"; 
  src: url(../fonts/NotoSansCJKjp-Bold.otf);
 font-display: swap; 
}
p {
/*-- txt-boldが読み込めない場合のために、代替フォントをカンマ区切りで用意 --*/
  font-family: 'txt-bold', sans-serif;
}



まとめると、

@font-face カッコの中に、font-familyの命名・src(ソース)の読み込み(*スペルミスに注意)・font-display: swap;の記述をして、フォントを登録
→ 適用させたい文字にシングルクォーテーションで呼び出す!

  • URLをコピーしました!
目次