Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8760

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

$
0
0

経緯

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にチョチョイとフォントファミっちゃってください⭕️


Viewing all articles
Browse latest Browse all 8760

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>