google fonts + webpack

Asked 10/3, 2017 at 0:55 Answered 10/5, 2021 at 18:46

I am new to webpack 2.2 ; I would like to know the best way to integrate a Google font within my project.

I am using the Webpack HTML plugin to generate an index.html from a template. So for the moment I hard-coded the Google font CSS directly in a <script> tag but I do not really like this 'solution' since it does not really use webpack at all:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <link href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister" rel="stylesheet">
  <body>
    <div id='app'/>
  </body>
</html>

Deviationism answered 10/3, 2017 at 0:55 Comment(0)

There is no need to use SASS. You will either need to use css-loader (if you are using CSS) or sass-loader (if you are using SASS). Note, if you are using SASS you will need both loaders.

Both loaders will pack url() statements. However, they both will only work if the URL is a relative URL (which is probably why the current answer doesn't seem to be working).

This means you will need to download the fonts. To make matters more complicated, each font is available in several formats and all formats are required if you want to support all browsers. Luckily, there is an excellent website to help us: google-webfonts-helper.

Enter the fonts you desire into that website and it will generate CSS rules for you that look like the following:

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

This CSS rule is importing via url() and the URLs are relative. This means that the css-loader will pack it into your application. However, you have to also download all of the files referenced by those URLs. Fortunately, the google-webfonts-helper website mentioned above offers you a download link for that purpose. Download those fonts and place them in ../fonts (or whatever directory you want. I personally use ./assets/fonts. The google-webfonts-helper tool has an input you can use if you have a custom directory)

BONUS: Material Icons Font

Google's material icons are typically exposed to a website as a font. However, they require special CSS to make them work. If you want to pack the material icons font then you need the following font face:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/MaterialIcons-Regular.eot'); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url('../fonts/MaterialIcons-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/MaterialIcons-Regular.woff2') format('woff2'),
    url('../fonts/MaterialIcons-Regular.woff') format('woff'),
    url('../fonts/MaterialIcons-Regular.ttf') format('truetype'),
    url('../fonts/MaterialIcons-Regular.svg#Inconsolata') format('svg'); /* Legacy iOS */
}

You can download the font files from here (Look in the iconfont directory of the extracted zip.

In addition you will also need to add the following CSS after the font face rule:

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Note: Instructions for using the material icons fonts come from here in case these instructions get out of date.

Sutter answered 17/1, 2018 at 21:26 Comment(2)

thanks for the detailed answer! About this part Both loaders will pack url() statements. However, they both will only work if the URL is a relative URL (which is probably why the current answer doesn't seem to be working). Compare to the documentation which seems it still could handle the source from external? if it could download external source first, and be handled by file-loader? Actually, this is related to a problem I am working on, any help is appreciated! – Girt 18/6, 2019 at 5:55

#56633384 – Girt 18/6, 2019 at 5:55

I import it directly inside my sass file and my webpack config has sass-loader. Let me know if you have more questions

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto:100,300,400");

@mixin h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 52px;
    line-height: 62px;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    margin-bottom: 40px;
}

Here is a sample webpack config for loading sass: (taken from https://github.com/webpack-contrib/sass-loader)

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
        }]
    }
};

Metalinguistic answered 19/3, 2017 at 0:49 Comment(3)

What is a sass file? Can you show the webpack 2 config with sass-loader, and what are the benefits it brings compared to classic css ? Could you please explain what sass is? – Deviationism 21/3, 2017 at 13:49

You can read more about the sass-loader and sample webpack config here: github.com/webpack-contrib/sass-loader I prefer using sass(scss really) , you can google for sass and its advantages - css-tricks.com/forums/topic/… – Metalinguistic 22/3, 2017 at 11:43

Does this actually get you the font files? I guess it only adds the @import statement to the resulting CSS file... – Scarab 17/6, 2017 at 14:25

There is another way you can bundle the style (in case the above doesn't suit you/ you don't want Sass ect.).

In the terminal run $ npm install --save-dev style-loader css-loader

In webpack.config.js, inside module.exports (with entry/output) add:

module: {
   rules: [
     {
       test: /\.css$/i,
       use: ['style-loader', 'css-loader'],
     },
   ],
 },

Inside your css file (that is inside the same folder as your .js file that gets bundled , example inside src if that is where you keep it) add the Google Font import to the top (example):

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');

And be sure that your main .js file (the one that gets bundled by webpack) imports the style.css path:

import './style.css';

This method might be easier for some people so that is why I'm adding it

Pleiades answered 10/5, 2021 at 18:46 Comment(0)

Recommended topics

Hot tags