cssでイラレの合成フォントみたいなことをする。

合成フォントで指示が来たので調べました。
一カ所ずつ指定するとかではなく、全角はこのフォント、数字はこのフォント、みたいなやつです。

ex.)
全角文字：ヒラギノ角ゴ Pro W3
半角文字：Lato Reguler

ヒラギノはブラウザ標準で指定可、Latoはないのでfont-faceでつくります。

@font-face {
  font-family: "Lato-Light";
  src: url("/fonts/Lato/Lato-Light.eot");
  src: url("/fonts/Lato/Lato-Light.ttf") format("truetype"),  
       url("/fonts/Lato/Lato-Light.woff2") format("woff2"),
       url("/fonts/Lato/Lato-Light.woff") format("woff");
  unicode-range: U+0030-0039, U+0041-007A;
}
@font-face {
  font-family: "Lato-Regular";
  src: url("/fonts/Lato/Lato-Regular.eot");
  src: url("/fonts/Lato/Lato-Regular.ttf") format("truetype"),  
       url("/fonts/Lato/Lato-Regular.woff2") format("woff2"),
       url("/fonts/Lato/Lato-Regular.woff") format("woff");
  unicode-range: U+0030-0039, U+0041-007A;
}

unicode-range: U+0030-0039, U+0041-007A;

この記述で、フォントを適応する文字を指定しています。

U+0030-0039が数字
U+0041-007Aが英字

あとはfont-familyで、適応を絞ってるフォントを先に指定します。

body {
  font-family: "Lato-Regular", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, Helvetica, sans-serif;
}