Help us understand the problem. What is going on with this article?

FontFamilyでフリーフォントを使いたい

経緯

FontFamilyで宣言できるFontの種類ってどれも似たり寄ったりでつまんない!!
シャレオツな文字使いたい!!
フリーフォント表示してくれ!!

手順

1.使いたいフリーフォントをダウンロードする

まずは自分の気に入ったフォントをダウンロードします!
僕が検索に使ったサイトはこれ
フォントフリー
(今回僕は「切り絵字フォント」をダウンロードしました)
ダウンロードしたフォントファイルはttf形式になっていると思いますが、これをwoff形式に変換します。
ちなみに、woffとはWeb Open Font Formatのことで、Webページ埋め込み用フォーマットでWebフォントとして使われるために作られたフォントファイル形式です。ほとんどのブラウザで使用できるようです。

2.ダウンロードしたフォントファイルをwoff形式に変換する

以下のサイトで公開しているWOFFコンバータをダウンロードして、先ほどダウンロードしたttf形式のフォントファイルをwoff形式に変換します。

WOFFコンバータ

3.CSSでフォントを指定する

あとは先ほど変換したフォントファイルをCSSで指定するだけ!
@font-face{
font-family: 'SyareotuFont';
src: url('./kirieji.woff') format('woff');
}

@font-faceで読み込むフォントを指定します。
次にそのフォントファミリーを好きな名前に名付けたら完成です!

あとは適用させたいタグやIDにチョチョイとフォントファミっちゃってください⭕️

makkori
web系専門学生1年生です!よろしくお願いします!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away