[SOLVED] google fonts + webpack

google fonts + webpack

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>

Solution

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.