css - 複数の Icomoon フォントを使用する方法 (複数のフォント ファミリー)

Question

Icomoon フォントは、フォント ファミリが 1 つしかない場合は正常に機能しますが、別のフォント ファミリを作成して最初のものと一緒に使用したい場合はどうすればよいですか? 私はこのようなことをしようとしました:

@font-face {
  font-family: 'icomoon';
  src:url('icomoon.eot');
  src:url('icomoon.eot?#iefix') format('embedded-opentype'),
  url('icomoon.woff') format('woff'),
  url('icomoon.ttf') format('truetype'),
  url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'abccons';
  src:url('fonts/abccons.eot');
  src:url('fonts/abccons.eot?#iefix') format('embedded-opentype'),
  url('fonts/abccons.woff') format('woff'),
  url('fonts/abccons.ttf') format('truetype'),
  url('fonts/abccons.svg#abccons') format('svg');
  font-weight: normal;
  font-style: normal;
}

font-family とまったく同じフォント ファイル名を使用しています。また、最初のフォント アイコンに「data-icon」属性を使用し、2 番目のフォント アイコンに「data-icon2」属性を使用しています。

[data-icon]:before { content:attr(data-icon); font-family:'icomoon'; font-variant:normal; font-weight:normal; line-height:1; speak:none; text-transform:none; -webkit-font-smoothing:antialiased; }

[data-icon2]:before { content:attr(data-icon2); font-family:'abccons'; font-variant:normal; font-weight:normal; line-height:1; speak:none; text-transform:none; -webkit-font-smoothing:antialiased; }

正しい方法で行っているかどうかはわかりません。フォントはhttp://css-tricks.com/html-for-icon-font-usage/で説明されている方法でロードされます。結果は次のとおりです。最初のフォントは正しく読み込まれますが、2 番目のフォントは既に何かが読み込まれているように見えますが、フォントではなくすべて正方形として表示されます。css ファイルで data-icon2 として設定しても、html で data-icon3 を使用すると (エラーを意図して)、何も読み込まれません。

何か案が？