title: How to preload Google Fonts from CDN with webpack
body: <p>My goal is to import the fonts by:</p>
  
  <pre><code>@import url('https://fonts.googleapis.com/css?family=Poppins:i,100,200,300);
  </code></pre>
  
  <p>in my <code>.scss</code> file, then preload all the fonts by <a href="https://github.com/GoogleChromeLabs/preload-webpack-plugin" rel="nofollow noreferrer">preload-webpack-plugin</a></p>
  
  <hr>
  
  <p>After I deployed my bundle, the google fonts are applied, and the font request is like this:</p>
  
  <p><a href="https://i.stack.imgur.com/OrQN3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OrQN3.png" alt="enter image description here"></a></p>
  
  <p>Compare to the request which utilized <code>@font-face</code> in the <code>.scss</code> file, get the fonts downloaded to local then served by myself:</p>
  
  <p><a href="https://i.stack.imgur.com/083qt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/083qt.png" alt="enter image description here"></a></p>
  
  <p>Only the file name of second one follows the <code>name</code> I defined in <code>file-loader</code> configuration:</p>
  
  <pre class="lang-js prettyprint-override"><code>exports.font = {
    test:   /\.(woff|woff2|ttf|eot)$/,
    loader: 'file-loader',
    query:  {
      name: '[name]-[hash:6].[ext]',
    },
  };
  </code></pre>
  
  <p>It's still reasonable for me, so my guess is, I think when Webpack is creating Dependency Graph <code>css-loader</code> interprets <code>@import</code> and <code>url()</code>, then <code>file-loader</code> duplicates the files to our dist folder, but if the source is from external, <code>file-loader</code> won't work on that.</p>
  
  <hr>
  
  <p>Again, compare requests to CDN and local, the <strong>Sources</strong> section in Devtool shows me:</p>
  
  <ul>
  <li>CDN:</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/MEtO1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MEtO1.png" alt="enter image description here"></a></p>
  
  <ul>
  <li>Local:</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/mDVJJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mDVJJ.png" alt="enter image description here"></a></p>
  
  <p>When I request fonts from CDN there is a new folder <strong>gstatic</strong>, before I add <a href="https://github.com/GoogleChromeLabs/preload-webpack-plugin" rel="nofollow noreferrer">preload-webpack-plugin</a>, the fonts are requested dynamically when meet the new fonts family/style in the new pages, after I add <a href="https://github.com/GoogleChromeLabs/preload-webpack-plugin" rel="nofollow noreferrer">preload-webpack-plugin</a>, the fonts are preloaded only for the way which is sending fonts request to local.</p>
  
  <pre class="lang-js prettyprint-override"><code>exports.preloadWebpack = new PreloadWebpackPlugin({
    rel:           'preload',
    include:       'allAssets',
    fileWhitelist: [/\.woff/, /\.woff2/, /\.ttf/],
    as:            'font',
  });
  </code></pre>
  
  <p>Any help is appreciated!!</p>