問題
- google font の
Rounded Mplus 1cを利用していた - IE11 / edge だとこのフォントが適用されない問題が報告された
解決した対応
- フォントが適用されない
IE11/edgeの為にwoffファイルを用意して自サーバーに配置 - フォントが問題なく適用されるブラウザは オフィシャルにある
google fontからフォント(woff2)をダウンロードして参照 - フォントが適用されないブラウザには
自サーバーにあるフォント(woff)をダウンロードして参照
google font が問題なく適用されるブラウザに対するフォントの適用
- google font のオフィシャルにもある通り、headタグ内で指定されたcssリンクを貼ればOK
- M PLUS Rounded 1c のページ
<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は滅びろ