1. ホーム
2. パソコン
3. HTML & CSS

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

投稿日 : 2023年05月22日 更新日 :

やりたいこと

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

フォントをダウンロード

Font Free

フォントの形式を変換

TTFからWOFFへのコンバーター

サーバーへアップロード

CSSの書き方

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

注意点！

まとめ