Question: I'm trying to load google font to my webapp (angular based but not relevant) and I'm getting this error:

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

```

The relevant part of my webpack.config.js is:

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

```

and my style.less is: 

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

body {
    font-family: "myFont";
}

```

My guess is that it is not really related to the webpack part but the font inclusion itself. Unfortunately I lack the knowledge to figure out where exactly is the problem.

Answer: 
I'd suggest you have a look at this article by Paul Irish from 2009 named [Bulletproof @font-face syntax](http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/)

It explains very well and in all detail how to get webfonts up and running across all (or at least all capable) browsers.
Another way is to use `link` tag to load the CSS. Then define the font in custom CSS.

Example:

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

    </style>

```