アイコンフォント「IcoMoon」をAMPページで使う方法

「Font Awesome」でアイコンフォントを表示している方が多いと思いますが、

  • LINE
  • Feedly
  • はてなブックマーク

などのアイコンがないので、違うものを使ったり、Font Awesomeと併用している方も中にはいるかと思います。

例えば、「IcoMoon」というサービス。

Font Awesomeにはないアイコンがたくさんあるので当サイトでも使っています。

今回は、そのIcoMoonをAMPページにも表示させる方法をご紹介します。

AMP用のstyleタグに記述

通常は、IcoMoonのサイトからダウンロードしたフォルダをアップロードし、

<link rel="stylesheet" href="https://lalala.com/wp-content/themes/4536/css/icomoon/style.css">

のようにheadタグ内にパスを記述しますが、AMPに対応させるにはIcoMoonフォルダの中にあるstyle.cssの中身を丸々<style amp-custom>タグ内にコピペします。

その後、

  1. パスの変更
  2. !importantが記述されているコメント部分を削除

と進めば導入は完了です。

パスはテーマディレクトリを関数で取得してもOK

当サイトはWordPressで構築しているんですが、urlの部分は

src: url('https://lalala.com/wp-content/themes/4536/css/icomoon/fonts/icomoon.eot?ay1q6x');

ときちんと記述しなくても、以下のように関数を使って取得することもできます。

src: url('<?php echo get_template_directory_uri(); ?>/css/icomoon/fonts/icomoon.eot?ay1q6x');

自作テーマなどで使う場合は後者のやり方で読み込みましょう。

サンプルコード

以下がIcoMoonをAMPで使うためのサンプルコードです。

@font-face {
 font-family: 'icomoon';
 src: url('<?php echo get_template_directory_uri(); ?>/css/icomoon/fonts/icomoon.eot?ay1q6x');
 src: url('<?php echo get_template_directory_uri(); ?>/css/icomoon/fonts/icomoon.eot?ay1q6x#iefix') format('embedded-opentype'),
 url('<?php echo get_template_directory_uri(); ?>/css/icomoon/fonts/icomoon.ttf?ay1q6x') format('truetype'),
 url('<?php echo get_template_directory_uri(); ?>/css/icomoon/fonts/icomoon.woff?ay1q6x') format('woff'),
 url('<?php echo get_template_directory_uri(); ?>/css/icomoon/fonts/icomoon.svg?ay1q6x#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
 font-family: 'icomoon';
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;

/* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.icon-hatena:before {
 content: "\e902";
}
.icon-feedly:before {
 content: "\e901";
}
.icon-line:before {
 content: "\e900";
}

他のWEBフォントも読み込める

ちなみに、制限の多いAMPですが、実は、IcoMoonに限らず様々な外部WEBフォントが使えます。

そのやり方は別記事でまとめているのでぜひ参考にしていただければと思います。

カテゴリーWEBフォント

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!