How to add google fonts as local fonts

One of the simple requirements of the web developer to add custom fonts on the website. Some times we want to add google fonts as local fonts to save our bandwidth, to save the numbers of network calls on our website.

Steps to add google fonts as local fonts

1. Go to Google webfonts helper
2. Select your intended fonts and its styles.
3. Download the fonts zip file
4. Copy CSS to right place - I mean in right css file and use the fonts.

Go to Google webfonts helper

If you download fonts from google fonts https://fonts.google.com/, it will only give ttf files. For the best support of the font in various devices and browser, you need a lot more types of fonts such as woff, woff2, eot, svg. Google webfonts helper is the website which provides the various versions of the same fonts so that that font can be best supported in all the browsers.

Select your intended fonts and its styles:

Now search your intended font, select charset and font styles for this particular font.

Download the fonts zip file:

Now download the font zip file to use it locally.

Copy CSS to right place:

Google webfonts helper also provides css to use the fonts locally. One of the good feature of the google webfonts helper is that you can set font path prefixes relative to fonts folder where all fonts files are.

That's all. Since you got font files and CSS to use that font, you are good to use it on your website or web app.

Example: How to add google fonts as local fonts in gatsby website:

Let's say you want to add Titillium Web font in your gatsby website

1. Follow first 2 steps - https://google-webfonts-helper.herokuapp.com/fonts/titillium-web?subsets=latin.

2. Now download the font zip file, extract the folder, copy all files from the extracted folder and paste it under src/fonts/titillium-web-v8-latin.

3. Create fonts.css file in fonts page and paste CSS from Google Webfonts helper. Note - Before copying CSS, set the path prefix to /titillium-web-v8-latin/.

/* '/src/fonts/fonts.css' */
/* titillium-web-200 - latin */
@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 200;
  src: url("/titillium-web-v8-latin/titillium-web-v8-latin-200.eot"); /* IE9 Compat Modes */
  src: local("Titillium Web ExtraLight"), local("TitilliumWeb-ExtraLight"),
    url("/titillium-web-v8-latin/titillium-web-v8-latin-200.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-200.woff2") format("woff2"),
    /* Super Modern Browsers */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-200.woff") format("woff"),
    /* Modern Browsers */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-200.ttf") format("truetype"),
    /* Safari, Android, iOS */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-200.svg#TitilliumWeb")
      format("svg"); /* Legacy iOS */
}
/* titillium-web-300 - latin */
@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 300;
  src: url("/titillium-web-v8-latin/titillium-web-v8-latin-300.eot"); /* IE9 Compat Modes */
  src: local("Titillium Web Light"), local("TitilliumWeb-Light"),
    url("/titillium-web-v8-latin/titillium-web-v8-latin-300.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-300.woff2") format("woff2"),
    /* Super Modern Browsers */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-300.woff") format("woff"),
    /* Modern Browsers */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-300.ttf") format("truetype"),
    /* Safari, Android, iOS */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-300.svg#TitilliumWeb")
      format("svg"); /* Legacy iOS */
}
/* titillium-web-regular - latin */
@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 400;
  src: url("/titillium-web-v8-latin/titillium-web-v8-latin-regular.eot"); /* IE9 Compat Modes */
  src: local("Titillium Web Regular"), local("TitilliumWeb-Regular"),
    url("/titillium-web-v8-latin/titillium-web-v8-latin-regular.eot?#iefix")
      format("embedded-opentype"), /* IE6-IE8 */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-regular.woff2") format("woff2"),
    /* Super Modern Browsers */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-regular.woff") format("woff"),
    /* Modern Browsers */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-regular.ttf") format("truetype"),
    /* Safari, Android, iOS */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-regular.svg#TitilliumWeb")
      format("svg"); /* Legacy iOS */
}
/* titillium-web-600 - latin */
@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 600;
  src: url("/titillium-web-v8-latin/titillium-web-v8-latin-600.eot"); /* IE9 Compat Modes */
  src: local("Titillium Web SemiBold"), local("TitilliumWeb-SemiBold"),
    url("/titillium-web-v8-latin/titillium-web-v8-latin-600.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-600.woff2") format("woff2"),
    /* Super Modern Browsers */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-600.woff") format("woff"),
    /* Modern Browsers */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-600.ttf") format("truetype"),
    /* Safari, Android, iOS */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-600.svg#TitilliumWeb")
      format("svg"); /* Legacy iOS */
}
/* titillium-web-700 - latin */
@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 700;
  src: url("/titillium-web-v8-latin/titillium-web-v8-latin-700.eot"); /* IE9 Compat Modes */
  src: local("Titillium Web Bold"), local("TitilliumWeb-Bold"),
    url("/titillium-web-v8-latin/titillium-web-v8-latin-700.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-700.woff2") format("woff2"),
    /* Super Modern Browsers */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-700.woff") format("woff"),
    /* Modern Browsers */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-700.ttf") format("truetype"),
    /* Safari, Android, iOS */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-700.svg#TitilliumWeb")
      format("svg"); /* Legacy iOS */
}
/* titillium-web-900 - latin */
@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 900;
  src: url("/titillium-web-v8-latin/titillium-web-v8-latin-900.eot"); /* IE9 Compat Modes */
  src: local("Titillium Web Black"), local("TitilliumWeb-Black"),
    url("/titillium-web-v8-latin/titillium-web-v8-latin-900.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-900.woff2") format("woff2"),
    /* Super Modern Browsers */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-900.woff") format("woff"),
    /* Modern Browsers */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-900.ttf") format("truetype"),
    /* Safari, Android, iOS */
      url("/titillium-web-v8-latin/titillium-web-v8-latin-900.svg#TitilliumWeb")
      format("svg"); /* Legacy iOS */
}

4. Now include fonts.css in root component of your gatsby and use it.

body {
  font-family: "Titillium Web", sans-serif;
}

That's all

I hope that you like the article.

Keep coding and keep learning...