How to host google web fonts on my own server?

Question

I need to use some google fonts on an intranet application. The clients may or may not have internet connection. Reading the license terms, it appears that its legally allo

Answer 1

Easiest Approach - Using google-webfonts-helper

Lets say we want to host the font Red Rose:

• Open google-webfonts-helper and filter for the required font on top left (type Red Rose and enter..)
• Choose from the charsets (default is latin; select others like latin-ext if you want extended support)
• Select the styles (deafult is regular)
• From the Copy CSS tab
  • Select Modern Browser if you wish to support only modern browsers (woff2, woff)
  • Select Best Support if you wish to support all browsers (I chose this - woff2, woff,ttf,svg,eot)
• In case your font files do not reside in ../fonts/ path, you can edit it to represent your actual path (for me it was ../assets/fonts/)
• Copy the CSS and keep for future use
• Download the zip file named red-rose-v1-latin-ext_latin; unzip it and place all fonts directly into your assets/fonts directory (based on what you gave earlier)
• In your stylesheet where you wish to embed, paste the copied CSS. It will look like the below if you chose these options

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

/* Red Rose will now be available for use in your stylesheet, provide this font */

:root {
  font-family: 'Red Rose', cursive, sans-serif;
}

• Thats ALL!