Color font（カラーフォント）をWebフォントとして使う
～ カラーフォント １０選 ～

カラーフォントをWebページで表示する方法｜カラーフォント１０選 サンプル

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

カラーフォント１０選
項 番font-family名カラーフォントファイル名Webフォント処理結果備　考
　1Gilbert Color Bold Preview5Gilbert-Color Bold Preview5.otf黒色文字表示
　2MIXAN GRADIENT FONTMIXANGRADIENTFONT.otf黒色文字表示
　3Segoe UI Emojiseguiemj.ttfカラー絵文字表示Windows PC標準搭載絵文字フォント
　4Pigmo 05 Clr NormalPigmo05Clr-Normal.otf黒色文字表示iPhone fontselfアプリ対応フォント
　5ColorTubeColorTube-Regular.otf黒色文字表示
　6AbeloneAbelone-FREE.otf黒色文字表示
　7PlayboxPlaybox-FREE.otf黒色文字表示
　8BixaNTBixa-Color.woff2黒色文字表示
　9Zilap MagicZilapMagic-vmnRM.ttfカラー文字表示
　10Font Google ColorFont Google Color.otfカラー絵文字表示Google絵文字フォント
注記(1) Webページで使用した場合、3.Segoe UI Emoji、9.Zilap Magicおよび10.Font Google Color以外は、黒色の文字が表示されます。
(2) 黒色文字表示されるフォント（項3,9,10以外）は、Adobe Illustrator CC2018～、PhotoShop CC2017～を使用すると、カラーフォントとして表示できます。
(3) 4.Pigmo 05 Clr Normalは、iPhoneのfontselfアプリ（無料）を使用するとカラーフォントとして表示できます。


カラーフォントを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>
    このサンプルコードのデモ ≫

カラーフォント１０選 サンプル

  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. Segoe UI Emoji

    Segoe UI Emojiは、Windows PCで標準搭載されているフォントですが、Webフォントで使用した結果カラーで表示されました。

    🍰 🥛 🐤 🛳 🥰 🙂 😍 😎
    😏 👧 👦 👫 💔 🐶 🐮 🐈
    　 （注）上列、2,4,5,6番目の４つの黒背景アイコンは、ダウンロードしたフォントファイルには存在しないため、Webアイコンととして表示されません。
    　　　PCローカルフォントが表示されています。

    絵文字フォントを使用する場合、Unicodeを指定して、絵文字を表示させます。
    Unicodeは、Emoji List, v13.1または、Full Emoji List, v13.1 より、Code項目（例：U+1F370）をコピーして、つぎのように編集します。
    【HTML例】U+1F370 → &#x1F370;　　　　　 
    
<!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-family: 'Segoe UI Emoji';
        src: url('urbanqee.com/html/font/color/seguiemj.ttf');
    } 
    .segoe {
        font-family: 'Segoe UI Emoji';
        font-size: 4.5rem;
    }
</style>
</head>
<body>
   <p class="segoe">＆#x1F370</p>
</body>
</html>
    フォントファイルは、つぎのサイトよりダウンロードできます。

  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 Font
    Webページで使用した場合、このような黒色の文字として表示されます。



    このような実際のカラーフォント文字を表示するには、 Adobe Illustrator CC2018～またはPhotoShop CC2017～が必要です。
    カラーフォント表示デモは、こちら。

    また、iOS環境に限り、fontselfアプリ（無料）でPigmo 05 Clr（4.項参照）を使用すると表示できます。
    フォントファイルは、つぎのサイトよりダウンロードできます。

  6. Abalone

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

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

  7. Playbox

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

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

  8. Bixa

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

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

  9. Zilap Magic

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

    Zilap Magic Font 表示デモ

    表示文字入力（英字）：

    Zilap Magic Color

    上のデモを新しいページ（HTMLコード付）で見るには、こちら。

    他サイトのカラーフォント表示デモは、こちら。

  10. Font Google Color

    Google Color Font
    Google Color Font と入力すると、このようなカラーフォントが表示されます。

    フォントファイルは、つぎのサイトよりダウンロードできます。

カラーフォントをWebページで表示する方法｜カラーフォント１０選 サンプル｜TOP



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

カラーフォント１０選
MENU

 1.Gilbert Color Bold
   Preview5
 2.MIXAN GRADIENT
   FONT
 3.Segoe UI Emoji
 4.Pigmo 05 Clr
   Normal
 5.ColorTube
 6.Abelone
 7.Playbox
 8.Bixa
 9.Zilap Magic
10.Font Google
   Color