使用Webpack加載字體：字體解碼問題

Question

我正在嘗試將谷歌字體加載到我的web應用程序中（基於角度但不相關），並且出現此錯誤：

Failed to decode downloaded font: https://fonts.googleapis.com/css?family=Open+Sans

我的webpack.config.js的相關部分是：

loaders: [
        {test: /\.less$/, loader: "style!css!less", exclude: /node_modules|bower_components/},
        {test: /\.woff(2)$/, loader: "url?limit=10000&minetype=application/font-woff"}
]

我的style.less是：

@font-face {
    font-family: "myFont";
    font-style: normal;
    src: url(https://fonts.googleapis.com/css?family=Open+Sans);
}

body {
    font-family: "myFont";
}

我的猜測是，它實際上與webpack部分無關，而與字體包含本身有關。 不幸的是，我缺乏知識來弄清楚問題出在哪里。

Answer 1

我建議您看看Paul Irish在2009年發表的這篇名為Bulletproof @ font-face語法的文章

它很好很好地解釋了如何在所有（或至少所有有能力的）瀏覽器中啟動和運行webfonts。

Answer 2

另一種方法是使用link標記加載CSS。 然后在自定義CSS中定義字體。

例：

  <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
    <style type="text/css">
       body { 
          font-family:'Abel',Sans; 
       }

    </style>