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 allowed

User · Answer

I used grunt-local-googlefont in a grunt task.

module.exports = function(grunt) {

    grunt.initConfig({
       pkg: grunt.file.readJSON('package.json'),

        "local-googlefont" : {
            "opensans" : {
                "options" : {
                    "family" : "Open Sans",
                    "sizes" : [
                        300,
                        400,
                        600
                    ],
                    "userAgents" : [
                        "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)",  //download eot
                        "Mozilla/5.0 (Linux; U; Android 4.1.2; nl-nl; GT-I9300 Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30", //download ttf
                        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1944.0 Safari/537.36" //download woff and woff2
                    ],
                    "cssDestination" : "build/fonts/css",
                    "fontDestination" : "build/fonts",
                    "styleSheetExtension" : "css",
                    "fontDestinationCssPrefix" : "fonts"

                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-local-googlefont');
 };

Then, to retrieve them:

grunt local-googlefont:opensans

Note, I'm using a fork from the original, which works better when retrieving fonts with whitespaces in their names.

User · Answer

Edit  As luckyrumo pointed out  typefaces is depricated in favour of  https   github com fontsource fontsource If you re using Webpack  you might be interested in this project  https   github com KyleAMathews typefaces E g  say you want to use Roboto font  npm install typeface-roboto --save  Then just import it in your app s entrypoint  main js file   import  typeface-roboto

User · Answer

I made a tiny PHP script to get download links from a Google Fonts CSS import URL like  https   fonts googleapis com css family Roboto 400 700 Slabo 27px Lato 400 300italic 900italic  You can use this tool here  http   nikoskip me gfonts php  For instance  if you use the above import URL  you will get this

User · Answer

The contents of the CSS file  from the include URL  depends on what browser I view it from  For example  when browsing to http   fonts googleapis com css family Open Sans using Chrome  the file only contained WOFF links  Using Internet Explorer  below   it included both EOT and WOFF  I pasted all the links into my browser to download them    font-face     font-family   Open Sans     font-style  normal    font-weight  400    src  url http   themes googleusercontent com static fonts opensans v6 cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE eot     src  local  Open Sans    local  OpenSans    url http   themes googleusercontent com static fonts opensans v6 cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE eot  format  embedded-opentype    url http   themes googleusercontent com static fonts opensans v6 cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw woff  format  woff        When you host your own web fonts  you need to correctly link to each font type  deal with legacy browser bugs  etc  When you use Google Web Fonts  hosted by Google   Google automatically links to the correct font types for that browser

User · Answer

In addition to k0pernicus I would like to suggest best-served-local  It s also a bash  v4  script to enable webserver operators to download and serve Google web fonts from their own webserver  But in addition to the other bash script  it lets the user fully automate  via cron and such  the serving of up-to-date font files and css-files

User · Answer

If you are using Nuxt  you can use their dedicated module for this purpose  https   github com nuxt-community google-fonts-module For me it works much better than the webfonts helper  which often had problems downloading the fonts during build and generated CSS files without Unicode ranges

User · Answer

My solution was to download the TTF files from google web fonts and then use onlinefontconverter com

User · Answer

You can actually download all font format variants directly from Google and include them in your css to serve from your server  That way you don t have to concern about Google tracking your site s users  However  the downside maybe slowing down your own serving speed  Fonts are quite demanding on resources  I have not done any tests in this issue yet  and wonder if anyone has similar thoughts

User · Answer

As you want to host all fonts  or some of them  at your own server  you a download fonts from this repo and use it the way you want  https   github com praisedpk Local-Google-Fonts  If you just want to do this to fix the leverage browser caching issue that comes with Google Fonts  you can use alternative fonts CDN  and include fonts as    lt link href  https   pagecdn io lib easyfonts fonts css  rel  stylesheet    gt    Or a specific font  as    lt link href  https   pagecdn io lib easyfonts lato css  rel  stylesheet    gt

User · Answer

I wrote a bash script that fetches the CSS file on Google s servers with different user agents  downloads the different font formats to a local directory and writes a CSS file including them  Note that the script needs Bash version 4 x   See https   neverpanic de blog 2014 03 19 downloading-google-web-fonts-for-local-hosting  for the script  I m not reproducing it here so I only have to update it in one place when I need to    Edit  Moved to https   github com neverpanic google-font-download

User · Answer

It is legally allowed as long as you stick to the terms of the font s license - usually the OFL    You ll need a set of web font formats  and the Font Squirrel Webfont Generator can produce these    But the OFL required the fonts be renamed if they are modified  and using the generator means modifying them

User · Answer

Great solution is google-webfonts-helper    It allows you to select more than one font variant  which saves a lot of time

User · Answer

You can download source fonts from https   github com google fonts  After that use font-ranger tool to split your large Unicode font into multiple subsets  e g  latin  cyrillic   You should do the following with  the tool    Generate subsets for each language you support Use unicode-range subsetting for saving bandwidth Remove bloat from your fonts and optimize them for web Convert your fonts to a compressed woff2 format Provide  woff fallback for older browsers Customize font loading and rendering Generate CSS file with  font-face rules Self-host web fonts or use them locally     Font-Ranger  https   www npmjs com package font-ranger  P S  You can also automate this using Node js API

User · Answer

There is a very simple script  written in plain Java  to download all fonts from a Google Web Font link  multiple fonts supported   It also downloads the CSS file and adapts it to local files  The user-agent can be adapted to get also other files than only WOFF2  See https   github com ssc-hrep3 google-font-download  The resulting files can easily be added to a build process  e g  a webpack build like vue-webpack

User · Answer

I have a script written in PHP similar to that of  neverpanic that automatically downloads both the CSS and fonts  both hinted and unhinted  from Google  It then serves the correct CSS and fonts from your own server based on the User Agent  It keeps its own cache  so fonts and CSS of a User Agent will only be downloaded once   It s in a premature stage  but it can be found here  DaAwesomeP   php-offline-fonts

User · Answer

There is a tool localfont com to help you download all font variants  It as well generates the corresponding CSS for implementation  deprecated  localfont is down   Instead  as Damir suggests  you can use google-webfonts-helper

User · Answer

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

User · Answer

Please keep in mind that my answer has aged a lot  There are other more technically sophisticated answers below  e g    neverpanic google-font-download google-webfont-helper localfont  so don t let the fact that this is the currently accepted answer give you the impression that this is still the best one   You can also now also download google s entire font set via on github at their google font repository  They also provide a  420MB zip snapshot of their fonts   You first download your font selection as a zipped package  providing you with a bunch of true type fonts  Copy them somewhere public  somewhere you can link to from your css  On the google webfont download page  you ll find a include link like so  http   fonts googleapis com css family Cantarell 400 700 400italic 700italic Candal  It links to a CSS defining the fonts via a bunch of  font-face defintions  Open it in a browser to copy and paste them into your own CSS and modify the urls to include the right font file and format types  So this       font-face         font-family   Cantarell         font-style  normal        font-weight  700        src  local  Cantarell Bold    local  Cantarell-Bold    url http   themes googleusercontent com static fonts cantarell v3 Yir4ZDsCn4g1kWopdg-ehHhCUOGz7vYGh680lGh-uXM woff  format  woff           becomes this         Your local CSS File         font-face           font-family   Cantarell           font-style  normal          font-weight  700          src  local  Cantarell Bold    local  Cantarell-Bold    url    font Cantarell-Bold ttf  format  truetype           As you can see  a downside of hosting the fonts on your own system this way is  that you restrict yourself to the true type format  whilst the google webfont service determines by the accessing device which formats will be transmitted  Furthermore  I had to add a  htaccess file to my the directory holding the fonts containing mime types to avoid errors from popping up in Chrome Dev Tools  For this solution  only true type is needed  but defining more does not hurt when you want to include different fonts as well  like font-awesome    htaccess AddType application vnd ms-fontobject  eot AddType font ttf  ttf AddType font otf  otf AddType application x-font-woff  woff

User · Answer

You may follow the script which is developed using PHP   Where you can download any google fonts by using the script  It will download the fonts and create a CSS file and archive to zip  You can download the source code from the GitHub https   github com sourav101 google-fonts-downloader   obj   new GoogleFontsDownloader   if isset   GET  url     amp  amp   empty   GET  url            obj- gt generate   GET  url        if isset   GET  download     amp  amp   empty   GET  download     amp  amp    GET  download     true          obj- gt download                GoogleFontsDownloader   Easy way to download any google fonts     author     Shohrab Hossain    version    1 0 0     class GoogleFontsDownloader       private  url                private  dir         dist        private  fontsDir    fonts        private  cssDir      css        private  fileName    fonts css       private  content            private  errors             private  success            public   is downloadable    false       public function   construct                 ini set  allow url fopen    on            ini set  allow url include    on               public function generate  url   null                if  filter var  url  FILTER VALIDATE URL      FALSE                          this- gt errors      lt li gt  lt strong gt Invalid url  lt  strong gt   url lt  li gt                      else                        this- gt url    url                 delete previous files              this- gt  destroy                   write font css              this- gt  css                   write fonts              this- gt  fonts                   archive files              this- gt  archive                           show all messages          this- gt  message               public function download                     Download the created zip file          zipFileName   trim  this- gt dir         zip           if  file exists  zipFileName                         header  Content-type  application zip                header  Content-Disposition  attachment  filename    zipFileName                header  Pragma  no-cache                header  Expires  0                readfile   zipFileName                    delete file              unlink  zipFileName               array map  unlink   glob   this- gt dir                     rmdir  this- gt dir                             private function  archive                 if  is dir  this- gt dir                          zipFileName   trim  this- gt dir         zip                zip   new  ZipArchive                 if   zip- gt open  zipFileName  ZipArchive  CREATE      TRUE                                  zip- gt addGlob  this- gt dir                           zip- gt addGlob  this- gt dir                            if   zip- gt status    ZIPARCHIVE  ER OK                                         this- gt success      lt li gt Zip create successful  lt  li gt                         this- gt is downloadable   true                                    else                                         this- gt errors      lt li gt Failed to create to zip lt  li gt                                                  else                                 this- gt errors      lt li gt ZipArchive not found  lt  li gt                                 zip- gt close                       else                        this- gt errors      lt li gt  lt strong gt File lt  strong gt  not exists  lt  li gt                             private function  css                    filePath    this- gt dir  this- gt cssDir  this- gt fileName           content     this- gt  request  this- gt url           if   empty  content                         if  file put contents  filePath   content                                  this- gt success      lt li gt  this- gt fileName generated successful  lt  li gt                     this- gt content    content                             else                                this- gt errors      lt li gt Permission errro in  this- gt fileName  Unable to write  filePath  lt  li gt                                    else                        this- gt errors      lt li gt Unable to create fonts css file  lt  li gt                         private function  fonts                 if   empty  this- gt content                         preg match all    bhttps       s   lt  gt          w d          punct   s          this- gt content   match                gFontPaths    match 0               if   empty  gFontPaths   amp  amp  is array  gFontPaths   amp  amp  sizeof  gFontPaths  gt 0                                 count   0                  foreach   gFontPaths as  url                                          name       basename  url                        filePath    this- gt dir  this- gt fontsDir  name                       this- gt content   str replace  url         this- gt fontsDir  name   this- gt content                         fontContent     this- gt  request  url                       if   empty  fontContent                                                 file put contents  filePath   fontContent                            count                             this- gt success      lt li gt The font  name downloaded  lt  li gt                                              else                                                this- gt errors      lt li gt Unable to download the font  name  lt  li gt                                                              file put contents  this- gt dir  this- gt cssDir  this- gt fileName   this- gt content                    this- gt success      lt li gt Total  count font s  downloaded  lt  li gt                                       private function  request  url                 ch   curl init             curl setopt array  ch  array              CURLOPT SSL VERIFYPEER   gt  FALSE              CURLOPT HEADER           gt  FALSE              CURLOPT FOLLOWLOCATION   gt  TRUE              CURLOPT URL              gt   url              CURLOPT REFERER          gt   url              CURLOPT RETURNTRANSFER   gt  TRUE                       result   curl exec  ch           curl close  ch            if   empty  result                         return  result                     return false             private function  destroy                  cssPath    this- gt dir  this- gt cssDir  this- gt fileName          if  file exists  cssPath   amp  amp  is file  cssPath                         unlink  cssPath                      else                       mkdir  this- gt dir  this- gt cssDir  0777  true                       fontsPath    this- gt dir  this- gt fontsDir          if   is dir  fontsPath                         mkdir  fontsPath  0777  true                     else                       array map function  font  use  fontsPath                    if  file exists  fontsPath  font   amp  amp  is file  fontsPath  font                                         unlink  fontsPath  font                                    glob  fontsPath                                private function  message                 if  strlen  this- gt errors  gt 0                        echo   lt div class  alert alert-danger  gt  lt ul gt  this- gt errors lt  ul gt  lt  div gt                        if  strlen  this- gt success  gt 0                        echo   lt div class  alert alert-success  gt  lt ul gt  this- gt success lt  ul gt  lt  div gt

[fonts] How to host google web fonts on my own server?

Examples related to fonts

Examples related to google-font-api