2024/04/03

カスタムフォントをアップロードしてCSSで表示させる方法

CSS

Web

Font

はじめに

フリーフォントなどをサーバーにアップロードしてWeb表示に使用する方法のメモです。

カスタムフォントを使用する

CSSの@font-faceを使用すると、カスタムフォントをWeb表示に使用できるようになります。

以下、/fontsディレクトリーにカスタムフォント（customfont.woff2、customfont.woff）をアップロードして表示に使用するサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <link rel="stylesheet" href="sample.css">
</head>
<body>
    <p>サンプル</p>
</body>
</html>

@font-face {
  font-family: 'CustomFont'; /* フォントフェイス値で使われる名前を指定 */
  src:
    local('Custom Font'), /* ローカルにインストールされている場合はそちらを使用 */
    url('/fonts/customfont.woff2') format('woff2'), /* Modern Browsers */
    url('/fonts/customfont.woff') format('woff'); /* Older Browsers */
}

body {
  font-family: 'CustomFont', sans-serif; /* カスタムフォントを使用 */
}