▲TOPへ戻る

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

free font

やりたいこと

フリーフォントをダウンロード&変換

フォントをダウンロード

以下のサイトからお気に入りのフォントを探せます。

フォントの形式を変換

ダウンロードしたttfファイルをwoffに変換
(より多くのブラウザ、デバイスに対応させるため)

以下のサイトから、オンラインで変換できます。

サーバーへアップロード

ttfファイルwoffファイルをサーバーへアップロードしましょう。

fontsフォルダを作り、ここにアップロードしました。

font

CSSの書き方

今回は3種類のフォント(アオハルマーカーmini、木漏れ日ゴシック、851マカポップ)を導入しました。

@font-faceの中に、 font-familyurlを指定します

@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>

指定のフォントにしたいところにクラスを設定します。

メロスは激怒した。必ず、かの邪智暴虐 の王を除かなければならぬと決意した。メロスには政治がわからぬ。 メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。 けれども邪悪に対しては、人一倍に敏感であった。

注意点!

オシャレだからと言ってマニアックなフォントを指定すると、 すべての文字に対応しておらず、一部表示できなくなってしまったり漢字だけ普通の字体になってしまったりするので注意‼

メロスは激怒した。必ず、かの邪智暴虐 の王を除かなければならぬと決意した。メロスには政治がわからぬ。 メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。 けれども邪悪に対しては、人一倍に敏感であった。

メロスは激怒した。必ず、かの邪智暴虐 の王を除かなければならぬと決意した。メロスには政治がわからぬ。 メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。 けれども邪悪に対しては、人一倍に敏感であった。

まとめ

  1. フリーフォントのダウンロードと変換
  2. ttfファイル、woffファイルをサーバーへアップロード
  3. @font-faceでfont-familyとURLを指定する
  4. クラスを指定し、フォントを表示させる

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ