fontの設定の仕方 @font-face

今は自身のポートフォリオの修正を進めている。
ただ、Scssのファイルの構成を考えたり、まとめたりしているのでなかなか進まない。

今回の 「@font-face」を初めて知ったと思っていたら、前に一回触れていた模様 orz

フォントの読込方法は、以下の2つ。

  • Webフォントのサーバに接続する
  • 自分の(契約)サーバにフォントを準備する
タップで読みたいところにジャンプします

Webフォントのサーバに接続する方法

<!-- Googleフォントの読込 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
STEP
Google Font のサイトに飛ぶ
STEP
使いたいフォントを探して選ぶ

欲しいフォントの右端のプラスマークを押す。
要らなければマイナスマークを押す。
左上の「かばん」マークを押すと今まで選んだものを見られる。

STEP
コードを取得し、headの部にはる。

「ウェブ上で使用する」のリンクを取得して、headの部分に貼る。

@font-face の設定

Webサイトで使用するのは、圧縮軽量化されたフォントファイル(WOFF形式)にすることが好ましいらしい。
もちろん、ttf形式でも読み込むことは出来る。

CSSファイルからフォントファイルを読み込んで使用する。

/* フォントを定義します */
@font-face {
  /* フォントに名前をつける */
  font-family: "font_accent";
  /* フォントファイルを読み込む */
  src: url("../fonts/RockSalt.ttf") format("truetype");
}

font-family

好きな名前を設定できる。

src: url

フォントファイルの保存フォルダーまでの相対パス。

format の中に設定するもの

ファイルのタイプ選ぶ型
.ttfTrueType
.otfOpenType
.woffWeb Open Font Format
.woff2Web Open Font Format 2

@font-face の使い方

      body {
        font-family: "font_accent", serif;
      }

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

タップで読みたいところにジャンプします