OpenType Color fonts（カラーフォント）をWebフォントとして使う
カラーフォント ８選 + Google Color Font

従来から、Webページではカラー文字を表示する場合、文字（Font）に色を付けてきたが、数年前から文字に色を付けるのではなく カラー文字（Color Font）を表示すことができるようになりました。
カラーフォントではあるが、Webフォントで使用した場合、文字は黒色で表示されます。
カラー文字として表示したい場合は、Adobe Illustrator CC2018～（有料）および PhotoShop CC2017～（有料）またはiPhoneアプリfontself（無料）を使用する必要があります。
このページで扱うカラーフォントは、アドビ（Adobe）とマイクロソフトが開発したOpenTypeフォントのカラーフォントの中から
下の８つの フリーフォントを選び紹介します。

OpenType カラーフォント８選 + Google Color Font
項 番font-family名カラーフォントファイル名備 考フォントサンプル
ページ内リンク
　1Gilbert Color Bold Preview5Gilbert-Color Bold Preview5.otf　>>1.
　2MIXAN GRADIENT FONTMIXANGRADIENTFONT.otf　>>2.
　3EmojiOneEmojiOneColor.otf　>>3.
　4Pigmo 05 Clr NormalPigmo05Clr-Normal.otfiPhone fontselfアプリ対応フォント　>>4.
　5ColorTubeColorTube-Regular.otf　>>5.
　6AbeloneAbelone-FREE.otf　>>6.
　7PlayboxPlaybox-FREE.otf　>>7.
　8BixaNTBixa-Color.woff2　>>8.
　9Font Google ColorFont Google Color.otfGoogleフォント　>>9.
注記(1) Webページで使用した場合、黒色の文字として表示されます。(Font Google Color以外）
(2) Adobe Illustrator CC2018～および PhotoShop CC2017～でカラーフォントとして表示されます。
　　(Font Google Color以外）


カラーフォントをWebページで表示する方法

  1. カラーフォントをダウンロードし、解凍後、OpenTypeフォントファイル（.otf .woff1 .woff2のいずれか）をサーバーへ
    アップロードします。
  2. フォントを表示するHTMLを作成します。サンプルHTMLでの使用フォントは Gilbert Color Bold Preview5です。
    
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Color Fonts demo</title>
<style>
    @font-face {
        font-family: 'Gilbert Color Bold Preview5';
        src: url('color/Gilbert-Color Bold Preview5.otf');
    } 
    .gilbert {
        font-family: 'Gilbert Color Bold Preview5';
        font-size: 4.5rem;
    }
</style>
</head>
<body>
   <p class="gilbert">Gilbert Color Bold Preview5</p>
</body>
</html>
    このサンプルコードのデモ ≫

カラーフォント８選 + Google Color Font サンプル

  1. Gilbert Color Bold Preview5

    Gilbert Color Bold Preview5
    Webページで使用した場合、このような黒色の文字として表示されます。

    このような実際のカラーフォント文字を表示するには、Adobe PhotoshopまたはAdobe Illustratorが必要です。
    Adobe Illustrator CC2018～および PhotoShop CC2017～でカラーフォントとして表示されます。
    また、iOS環境に限り、fontselfアプリ（無料）でPigmo 05 Clr（4.項参照）を使用すると表示できます。
    フォントファイルは、このページよりダウンロードできます。

  2. MIXAN GRADIENT FONT

    MIXAN GRADIENT FONT
    Webページで使用した場合、このような黒色の文字として表示されます。

    このような実際のカラーフォント文字を表示するには、Adobe PhotoshopまたはAdobe Illustratorが必要です。
    Adobe Illustrator CC2018～および PhotoShop CC2017～でカラーフォントとして表示されます。
    また、iOS環境に限り、fontselfアプリ（無料）でPigmo 05 Clr（4.項参照）を使用すると表示できます。
    フォントファイルは、このページよりダウンロードできます。

  3. EmojiOne

    EmojiOne Color smaile 😀
    Webページで使用した場合、このような黒色の文字として表示されます。


    つぎのページで絵文字がダウンロードできます：https://www.joypixels.com/emoji
    フォントファイルは、このページよりダウンロードできます。

  4. Pigmo 05 Clr Normal

    Pigmo 05 Clr Normal
    Webページで使用した場合、このような黒色の文字として表示されます。

    このような実際のカラーフォント文字を表示するには、Adobe PhotoshopまたはAdobe Illustratorが必要です。
    Adobe Illustrator CC2018～および PhotoShop CC2017～でカラーフォントとして表示されます。
    また、iOS環境に限りfontselfアプリ（無料）で、Pigmo 05 Clrを使用すると表示できます。
    フォントファイルは、このページよりダウンロードできます。

  5. ColorTube

    ColorTube
    Webページで使用した場合、このような黒色の文字として表示されます。

    このような実際のカラーフォント文字を表示するには、Adobe PhotoshopまたはAdobe Illustratorが必要です。
    Adobe Illustrator CC2018～および PhotoShop CC2017～でカラーフォントとして表示されます。
    また、iOS環境に限り、fontselfアプリ（無料）でPigmo 05 Clr（4.項参照）を使用すると表示できます。
    フォントファイルは、このページよりダウンロードできます。

  6. Abalone Color Font

    Abalone Color Font
    Webページで使用した場合、このような黒色の文字として表示されます。

    このような実際のカラーフォント文字を表示するには、Adobe PhotoshopまたはAdobe Illustratorが必要です。
    Adobe Illustrator CC2018～および PhotoShop CC2017～でカラーフォントとして表示されます。
    また、iOS環境に限り、fontselfアプリ（無料）でPigmo 05 Clr（4.項参照）を使用すると表示できます。
    フォントファイルは、このページよりダウンロードできます。

  7. Playbox Color Font

    Playbox Color Font
    Webページで使用した場合、このような黒色の文字として表示されます。

    このような実際のカラーフォント文字を表示するには、Adobe PhotoshopまたはAdobe Illustratorが必要です。
    Adobe Illustrator CC2018～および PhotoShop CC2017～でカラーフォントとして表示されます。
    また、iOS環境に限り、fontselfアプリ（無料）でPigmo 05 Clr（4.項参照）を使用すると表示できます。
    フォントファイルは、このページよりダウンロードできます。

  8. Bixa Color Font

    Bixa Color Font
    Webページで使用した場合、このような黒色の文字として表示されます。

    このような実際のカラーフォント文字を表示するには、Adobe PhotoshopまたはAdobe Illustratorが必要です。
    Adobe Illustrator CC2018～および PhotoShop CC2017～でカラーフォントとして表示されます。
    また、iOS環境に限り、fontselfアプリ（無料）でPigmo 05 Clr（4.項参照）を使用すると表示できます。
    フォントファイルは、このページよりダウンロードできます。

  9. Google Color Font（参考）

    Google Color Font
    Google Color Font と入力すると、このようなカラーフォントが表示されます。
    フォントファイルは、このページよりダウンロードできます。



 最終更新日：2021. 8. 2（初版）