・ダウンロードしたWebフォントをCSSで使う方法は？
こんな疑問にお答えします。
ネット上にある無料でダウンロード可能なフォントを使って、コーディングすることがあります。
実は「@font-face」を使って定義すれば、CSSにて利用可能です。
すぐにできるよ！
ということで、この記事では「CSSでWebフォントを使う方法」について解説していきます！
CSSでWebフォントを使う方法
目次
【解説】CSSでWebフォントを使う5つの手順【 @font-face】
ダウンロードした無料のWebフォントを、CSSで使う手順が下記になります。
- フォントをダウンロードする
- フォルダを解凍する
- ファイルを「fonts」フォルダに入れる
- @font-faceで定義する
- CSSでフォントを指定する
順に見ていきましょう。
まず無料のフォントをダウンロードしましょう。
今回は例として「やさしさゴシック」を使っていきます。
下記のようにZIPフォルダがダウンロードできました。
そしたら先ほどのフォルダを解凍します。
下記のように「07やさしさゴシック.ttf」ファイルがありますので、こちらを使用。
読み込みやすいように、リネームいたしました↓
拡張子は変えないように注意しよう。
続いてわかりやすいように「fonts」フォルダを作成。
この中に先ほどの「test-font.ttf」を入れていきます。
そしたらダウンロードしたフォントファイルを使えるように、定義します。
やり方は簡単で「@font-face」を使用。
定義のコードがこちら↓
@font-face {
font-family: '自分で決めたフォント名';
src: url('フォントファイルまでの相対パス') format('フォーマット名');
}| ファイル拡張子 | フォーマット名 |
|---|---|
| .ttf | truetype |
| .otf | opentype |
| .svg | svg |
| .woff | woff |
| .woff2 | woff2 |
任意のフォント名、相対パス、フォーマット名を記述して定義します。
今回の「test-font.ttf」を使う場合は、下記のようなコードになります↓
@font-face {
font-family: 'test-font';
src: url('./fonts/test-font.ttf') format('truetype');
}ちなみに下記のように複数のフォーマット指定もできますよ。
@font-face {
font-family: 'test-font';
src: url('./fonts/test-font.ttf') format('truetype');
src: url('./fonts/test-font.ttf') format('woff');
}細字や太字、斜体などの読み込みも可能です。
やり方は下記の感じ↓
/* 通常 */
@font-face {
font-family: 'test-font';
src: url('./fonts/test-font.ttf') format('truetype');
font-weight: normal;
}
/* 太字 */
@font-face {
font-family: 'test-font';
src: url('./fonts/test-font.ttf') format('truetype');
font-weight: bold;
}
/* 斜体 */
@font-face {
font-family: 'test-font';
src: url('./fonts/test-font.ttf') format('truetype');
font-style: italic;
}ちなみにフォントによっては定義せずに「font-weight: bold;」が反映される場合があります。
まずは反映するかどうか、試してみるべしですね。
あとはCSSにて、定義したフォントを指定するコードを書けばOKです。
やり方は通常通り。
下記のように↓
/* 通常 */
.text01 {
font-family: 'test-font', sans-serif;
}
/* 太字 */
.text02 {
font-family: 'test-font', sans-serif;
font-weight: bold;
}
/* 斜体 */
.text03 {
font-family: 'test-font', sans-serif;
font-style: italic;
}これでダウンロードしたフォントが反映されます！
【解説】CSSでWebフォントを使う5つの手順【 @font-face】：まとめ
- フォントをダウンロードする
- フォルダを解凍する
- ファイルを「fonts」フォルダに入れる
- @font-faceで定義する
- CSSでフォントを指定する
CSSでダウンロードしたWebフォントを使いたい時はためしてみてね！
