google fonts + webpack

webpack-2 google-webfonts
mguijarr picture mguijarr · Mar 10, 2017 · Viewed 18.7k times · Source

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>

Answer

Pace picture Pace · Jan 17, 2018

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.

Related questions

Define global variable with webpack

Is it possible to define a global variable with webpack to result something like this: var myvar = {}; All of the examples I saw were using external file require("imports?$=jquery!./file.js")

Read More
Typescript react - Could not find a declaration file for module ''react-materialize'. 'path/to/module-name.js' implicitly has an any type

I am trying to import components from react-materialize as - import {Navbar, NavItem} from 'react-materialize'; But when the webpack is compining my .tsx it throws an error for the above as - ERROR in ./src/common/navbar.tsx (3,31): error TS7016: …

Read More
How to determine the installed webpack version

Especially during the transition from webpack v1 to v2, it would be important to programmatically determine what webpack version is installed, but I cannot seem to find the appropriate API.

Read More