WEBページでフリーフォントを表示させるためのCSSの設定

やりたいこと
フリーフォントをダウンロード&変換
フォントをダウンロード
以下のサイトからお気に入りのフォントを探せます。
フォントの形式を変換
ダウンロードしたttfファイルをwoffに変換
(より多くのブラウザ、デバイスに対応させるため)
以下のサイトから、オンラインで変換できます。
サーバーへアップロード
ttfファイルとwoffファイルをサーバーへアップロードしましょう。
fontsフォルダを作り、ここにアップロードしました。

CSSの書き方
今回は3種類のフォント(アオハルマーカーmini、木漏れ日ゴシック、851マカポップ)を導入しました。
@font-faceの中に、 font-familyとurlを指定します
@font-face {
font-family: "aoharu";
src: url("https://gxy-life.com/fonts/aoharu-marker-mini.woff")format("woff"),
url("https://gxy-life.com/fonts/aoharu-marker-mini.ttf")format("truetype");
}
@font-face {
font-family: "mkpop";
src: url("https://gxy-life.com/fonts/MkPOP_101.woff")format("woff"),
url("https://gxy-life.com/fonts/MkPOP_101.ttf")format("truetype");
}
@font-face {
font-family: "komorebi-gothic";
src: url("https://gxy-life.com/fonts/komorebi-gothic.woff")format("woff"),
url("https://gxy-life.com/fonts/komorebi-gothic.ttf")format("truetype");
}
/* クラスを指定 */
.mkpop{
font-family: "mkpop", sans-serif, serif;
}
<p class="mkpop">
メロスは激怒した。必ず、かの邪智暴虐
の王を除かなければならぬと決意した。メロスには政治がわからぬ。
メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。
けれども邪悪に対しては、人一倍に敏感であった。
</p>
指定のフォントにしたいところにクラスを設定します。
メロスは激怒した。必ず、かの邪智暴虐 の王を除かなければならぬと決意した。メロスには政治がわからぬ。 メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。 けれども邪悪に対しては、人一倍に敏感であった。
注意点!
オシャレだからと言ってマニアックなフォントを指定すると、 すべての文字に対応しておらず、一部表示できなくなってしまったり、 漢字だけ普通の字体になってしまったりするので注意‼
メロスは激怒した。必ず、かの邪智暴虐 の王を除かなければならぬと決意した。メロスには政治がわからぬ。 メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。 けれども邪悪に対しては、人一倍に敏感であった。
メロスは激怒した。必ず、かの邪智暴虐 の王を除かなければならぬと決意した。メロスには政治がわからぬ。 メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。 けれども邪悪に対しては、人一倍に敏感であった。
まとめ
- フリーフォントのダウンロードと変換
- ttfファイル、woffファイルをサーバーへアップロード
- @font-faceでfont-familyとURLを指定する
- クラスを指定し、フォントを表示させる
こんな記事も読まれています。
-
【CSS】box-sizing: border-boxとは?指定するメリットは?
CSSのbox-sizing: border-boxについて解説します。指定することによりレイアウトしやすくなります。また、親要素からはみ出すことも防げます。
-
【CSS】box-sizing: border-boxとは?指定するメリットは?
CSSのflexboxで上下左右、中央の配置の方法について説明します。justify-contentで左右の配置を、align-itemsで上下の配置を決めます。flex-start,center,flex-endの使い方。
- リンク
-
【CSS】transformのrotateとtransform-originについて。回転させる基点を変える
CSSのrotateについて解説します。指定によりZ軸、X軸、Y軸で回転させます。またtarnsform-originを指定することにより、回転する基点を移動させることができます。
-
【CSS】filterの使い方 画像をぼかしたり、色の変化を適用させる
【CSS】filterの使い方について解説します。画像をぼかしたり、色の変化を適用させるには? brightness、contrast、drop-shadow、grayscale、hue-rotate、invert、saturate、sepiaの設定方法
- リンク
-
【CSS】perspective と transform-style で3D表現。立方体を作ってみよう。
CSSのperspectiveとtransform-styleについて解説します。CSSだけで3Dを表現できます。立方体をつくり、それを応用する方法も紹介します。
-
【CSS】animation パート2 アニメーションの動き(time-function),遅延時間(delay),方向(direction)について
【CSS】animation のアニメーションの動き(time-function),遅延時間(delay),方向(direction)について解説します。。
- リンク
-
【css】grid-templateでtwitter風に画像を表示させる方法
grid-templateを使えば、画像を思い通りに配置できます。twitter風に画像を表現することができます。
-
リンク
-
【CSS】マウスを乗せた(ホバーした)時、サムネイル画像を拡大・縮小する方法
CSSでマウスをホバーした時、サムネイル画像を拡大・縮小する方法。overflow: hiddenやtransform: scale();を使い、拡大、縮小させます。