Help us understand the problem. What is going on with this article?

IE11 / edge でgoogle fontが適用されない問題

More than 1 year has passed since last update.

問題

  • google font の Rounded Mplus 1c を利用していた
  • IE11 / edge だとこのフォントが適用されない問題が報告された

解決した対応

  • フォントが適用されない IE11/edge の為に woff ファイルを用意して自サーバーに配置
  • フォントが問題なく適用されるブラウザは オフィシャルにあるgoogle fontからフォント(woff2)をダウンロードして参照
  • フォントが適用されないブラウザには自サーバーにあるフォント(woff)をダウンロードして参照

google font が問題なく適用されるブラウザに対するフォントの適用

<head>
  <link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">
</head>

google font が適用されないブラウザに対するフォントの適用

  • オフィシャルサイトからフォントファイルをダウンロード
  • 今回のフォントは woff2 形式なので、 woff 形式に変換
  • 変換した woff ファイルを参照するように自前で @font-face を書く
  • 自サーバーに woff ファイルを配置して参照させる

font-face

  • 自前で用意した woff のフォント名を M PLUS Rounded 1c woff として、googlefontがデフォで提供するフォント名とは違う名前にした
sass
@font-face
  font-family: 'M PLUS Rounded 1c woff'
  font-style: normal
  font-weight: 400
  src: local('M PLUS Rounded 1c'), local('MPLUSRounded1c-Regular'), url(/fonts/MPLUSRounded1c-Regular.woff) format('woff')

@font-face
  font-family: 'M PLUS Rounded 1c woff'
  font-style: normal
  font-weight: 500
  src: local('M PLUS Rounded 1c Medium'), local('MPLUSRounded1c-Medium'), url(/fonts/MPLUSRounded1c-Medium.woff) format('woff')

@font-face
  font-family: 'M PLUS Rounded 1c woff'
  font-style: normal
  font-weight: 700
  src: local('M PLUS Rounded 1c Bold'), local('MPLUSRounded1c-Bold'), url(/fonts/MPLUSRounded1c-Bold.woff) format('woff')

@font-face
  font-family: 'M PLUS Rounded 1c woff'
  font-style: normal
  font-weight: 800
  src: local('M PLUS Rounded 1c ExtraBold'), local('MPLUSRounded1c-ExtraBold'), url(/fonts/MPLUSRounded1c-ExtraBold.woff) format('woff')

font-family

  • M PLUS Rounded 1c はオフィシャルのフォント名
  • M PLUS Rounded 1c woff は自サーバーに配置しているフォントファイル参照のフォント名
  • オフィシャルのフォントの優先順位を上げるために、フォント名を変更した
sass
body
  font-family: "M PLUS Rounded 1c", "M PLUS Rounded 1c woff", sans-serif

原因・調査

  • 今回利用したフォントは woff2 形式しか提供してない
  • IE11は woff2 をサポートしていない
  • edgeは woff2 をサポートしているのになぜか適用されない
  • オフィシャルが提供しているリンクでダウンロードされてくるフォント用のcssを確認したところ、 IE11/edgeでダウンロードされるcssとchrome/safariなどでダウンロードされてくるcssで全く違うものがダウンロードされてきた

IE11/edgeでダウンロードされてくるフォントcss

@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 400;
  src: local('M PLUS Rounded 1c'), local('MPLUSRounded1c-Regular'), url(https://fonts.gstatic.com/s/mplusrounded1c/v2/VdGEAYIAV6gnpUpoWwNkYvrugw9RuMWBxLg.woff) format('woff');
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 500;
  src: local('M PLUS Rounded 1c Medium'), local('MPLUSRounded1c-Medium'), url(https://fonts.gstatic.com/s/mplusrounded1c/v2/VdGBAYIAV6gnpUpoWwNkYvrugw9RuM1y56sNz-0.woff) format('woff');
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 700;
  src: local('M PLUS Rounded 1c Bold'), local('MPLUSRounded1c-Bold'), url(https://fonts.gstatic.com/s/mplusrounded1c/v2/VdGBAYIAV6gnpUpoWwNkYvrugw9RuM064asNz-0.woff) format('woff');
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 800;
  src: local('M PLUS Rounded 1c ExtraBold'), local('MPLUSRounded1c-ExtraBold'), url(https://fonts.gstatic.com/s/mplusrounded1c/v2/VdGBAYIAV6gnpUpoWwNkYvrugw9RuM0m4qsNz-0.woff) format('woff');
}

chromeでダウンロードされてくるフォントcss

/* [1] */
@font-face {
    font-family: 'M PLUS Rounded 1c';
    font-style: normal;
    font-weight: 400;
    src: local('M PLUS Rounded 1c'), local('MPLUSRounded1c-Regular'), url(https://fonts.gstatic.com/s/mplusrounded1c/v2/VdGEAYIAV6gnpUpoWwNkYvrugw9RuPWDzrkC76yIxT4hKyPOzVM3THy_qDANnU0EOWwj7SQXyYp3WEPHz5etWX-uS0g.1.woff2) format('woff2');
    unicode-range: U+243bc, U+243d0, U+24629, U+246a5, U+247f1, U+24896, U+248e9, U+24a4d, U+24b56, U+24b6f, U+24c16, U+24d14, U+24e04, U+24e0e, U+24e37, U+24e6a, U+24e8b, U+24ff2, U+2504a, U+25055, U+25122, U+251a9, U+251cd, U+251e5, U+2521e, U+2524c, U+2542e, U+2548e, U+254d9, U+2550e, U+255a7, U+2567f, U+25771, U+257a9, U+257b4, U+25874, U+259c4, U+259cc, U+259d4, U+25ad7, U+25ae3-25ae4, U+25af1, U+25bb2, U+25c4b, U+25c64, U+25da1, U+25e2e, U+25e56, U+25e62, U+25e65, U+25ec2, U+25ed8, U+25ee8, U+25f23, U+25f5c, U+25fd4, U+25fe0, U+25ffb, U+2600c, U+26017, U+26060, U+260ed, U+26222, U+2626a, U+26270, U+26286, U+2634c, U+26402, U+2667e, U+266b0, U+2671d, U+268dd, U+268ea, U+26951, U+2696f, U+26999, U+269dd, U+26a1e, U+26a58, U+26a8c, U+26ab7, U+26aff, U+26c29, U+26c73, U+26c9e, U+26cdd, U+26e40, U+26e65, U+26f94, U+26ff6-26ff8, U+270f4, U+2710d, U+27139, U+273da-273db, U+273fe, U+27410, U+27449, U+27614-27615, U+27631, U+27684, U+27693, U+2770e, U+27723, U+27752, U+278b2, U+27985, U+279b4, U+27a84, U+27bb3, U+27bbe, U+27bc7, U+27c3c, U+27cb8, U+27d73, U+27da0, U+27e10, U+27fb7, U+2808a, U+280bb, U+28277, U+28282, U+282f3, U+283cd, U+2840c, U+28455, U+2856b, U+285c8-285c9, U+286d7, U+286fa;
}

/* [2] */
@font-face {
    font-family: 'M PLUS Rounded 1c';
    font-style: normal;
    font-weight: 400;
    src: local('M PLUS Rounded 1c'), local('MPLUSRounded1c-Regular'), url(https://fonts.gstatic.com/s/mplusrounded1c/v2/VdGEAYIAV6gnpUpoWwNkYvrugw9RuPWDzrkC76yIxT4hKyPOzVM3THy_qDANnU0EOWwj7SQXyYp3WEPHz5etWX-uS0g.2.woff2) format('woff2');
    unicode-range: U+205b1, U+205d6, U+20611, U+20628, U+206ec, U+2074f, U+207c8, U+20807, U+2083a, U+208b9, U+2090e, U+2097c, U+20984, U+2099d, U+20a64, U+20ad3, U+20b1d, U+20b9f, U+20bb7, U+20d45, U+20d58, U+20de1, U+20e64, U+20e6d, U+20e95, U+20f5f, U+21201, U+2123d, U+21255, U+21274, U+2127b, U+212d7, U+212e4, U+212fd, U+2131b, U+21336, U+21344, U+213c4, U+2146d-2146e, U+215d7, U+21647, U+216b4, U+21706, U+21742, U+218bd, U+219c3, U+21a1a, U+21c56, U+21d2d, U+21d45, U+21d62, U+21d78, U+21d92, U+21d9c, U+21da1, U+21db7, U+21de0, U+21e33-21e34, U+21f1e, U+21f76, U+21ffa, U+2217b, U+22218, U+2231e, U+223ad, U+22609, U+226f3, U+2285b, U+228ab, U+2298f, U+22ab8, U+22b46, U+22b4f-22b50, U+22ba6, U+22c1d, U+22c24, U+22de1, U+22e42, U+22feb, U+231b6, U+231c3-231c4, U+231f5, U+23372, U+233cc, U+233d0, U+233d2-233d3, U+233d5, U+233da, U+233df, U+233e4, U+233fe, U+2344a-2344b, U+23451, U+23465, U+234e4, U+2355a, U+23594, U+235c4, U+23638-2363a, U+23647, U+2370c, U+2371c, U+2373f, U+23763-23764, U+237e7, U+237f1, U+237ff, U+23824, U+2383d, U+23a98, U+23c7f, U+23cbe, U+23cfe, U+23d00, U+23d0e, U+23d40, U+23dd3, U+23df9-23dfa, U+23f7e, U+2404b, U+24096, U+24103, U+241c6, U+241fe, U+242ee;
}

/* 長いので割愛 */

/* [119] */
@font-face {
    font-family: 'M PLUS Rounded 1c';
    font-style: normal;
    font-weight: 800;
    src: local('M PLUS Rounded 1c ExtraBold'), local('MPLUSRounded1c-ExtraBold'), url(https://fonts.gstatic.com/s/mplusrounded1c/v2/VdGBAYIAV6gnpUpoWwNkYvrugw9RuM0m4psPxeymz15tQHHFwkYlR0a4qBwNyWFAPWwgsx1Wx51aDwL6iMSkSWi2PjzPH7Y.119.woff2) format('woff2');
    unicode-range: U+20, U+3001-3002, U+3041-3057, U+3059-307b, U+307d-307f, U+3081-308f, U+3091-3093, U+3099-309a, U+30a1-30e1, U+30e3-30ed, U+30ef-30f0, U+30f2-30f4, U+30fb-30fc, U+ff0c, U+ff0e;
}

今回の問題解決のために参考にした記事

この記事を書いた人には感謝しかありません

愚痴

IEとedgeは滅びろ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした