Downloading a Google font and setting up an offline site that uses it

Question

I have a template and it has a reference to a Google font like this    lt link href  http   fonts googleapis com css family Open Sans 400italic 600italic 400 600 300  rel  stylesheet  type  text css  gt    How can I download it and set it up to use in my pages which are running offline all the time

User · Answer

You need to download the font and reference it locally.

Download the CSS from the link you posted, then download all of the WOFF files and (if needed) convert them to TTF.

Then change the CSS from the link you posted to include the fonts locally.

From

url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)

To

url(/path/to/font/font.woff)

Voila! There might be some more you need to do but the above is the basics. This article explains a little better.

User · Answer

If you d like to explicitly declare your package dependencies or automate the download  you can add a node package to pull in google fonts and serve locally   npm - Google Font Downloads  The typefaces project creates NPM packages for Open Source typefaces       Each package ships with all the necessary fons and css to self-host an open source typeface    All Google Fonts have been added as well as a small but growing list of other open source fonts    Just search npm for typeface- lt typefacename  to browse the available fonts like typeface-roboto or typeface-open-sans and install like this     npm install typeface-roboto    --save    npm install typeface-open-sans --save    npm install material-icons     --save    npm - Google Fonts Download-ers  For the more generic use case  there are several npm packages that will deliver fonts in two steps  first by obtaining the package  and then by pointing it to the font name and options you d like to include   Here are some of the options    Google Fonts Webpack Plugin Google Fonts Offline Google Fonts Get Google Fonts   Further Reading     How to host material icons offline  Using offline Material icons and Roboto font in Electron app

User · Answer

Found a step-by-step way to achieve this  for 1 font    as of Sep-9 2013         Choose your font at http   www google com fonts   Add the desired one to your collection using  Add to collection  blue button   Click the  See all styles  button near  Remove from collection  button and make sure that you have selected other styles you may also need such as  bold       Click the  Use  tab  button on bottom right of the page   Click the download button on top with a down arrow image   Click on  zip file  on the the popup message that appears   Click  Close  button on the popup   Slowly scroll the page until you see the 3 tabs  Standrd  import Javascript    Click   import  tab   Select and copy the url between  url   and       Copy it on address bar in a new tab and go there   Do  File   Save page as     and name it  desiredfontname css   replace accordingly    Decompress the fonts  zip file you downloaded   ttf should be extracted    Go to  http   ttf2woff com   and convert any  ttf extracted from zip to  woff   Edit desiredfontname css and replace any url within it  between  url   and      with the corresponding converted  woff file you got on ttf2woff com  path you write should be according to your server doc root   Save the file and move it at its final place and write the corresponding  lt link  gt  CSS tag to import these in your HTML page   From now  refer to this font by its font-family name in your styles      That s it  Cause I had the same problem and the solution on top did not work for me

User · Answer

Just go to Google Fonts - http   www google com fonts    add the font you like to your collection  and press the download button  And then just use the  fontface to connect this font to your web page   Btw  if you open the link you are using  you ll see an example of using  fontface   http   fonts googleapis com css family Open Sans 400italic 600italic 400 600 300   For an example    font-face     font-family   Open Sans     font-style  normal    font-weight  300    src  local  Open Sans Light    local  OpenSans-Light    url http   themes googleusercontent com static fonts opensans v6 DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk woff  format  woff        Just change the url address to the local link on the font file  you ve downloaded   You can do it even easier    Just download the file  you ve linked   http   fonts googleapis com css family Open Sans 400italic 600italic 400 600 300   Name it opensans css or so    Then just change the links in url   to your path to font files    And then replace your example string with    lt link href  opensans css  rel  stylesheet  type  text css  gt

User · Answer

I followed duydb s answer to produce the python code below that automates this process    import requests  with open  example css    r   as f      text   f read       urls   re findall r  https              text   for url in urls      filename   url split      -1      r   requests get url      with open    fonts     filename   wb   as f           f write r content      text   text replace url    fonts     filename   with open  example css    w   as f          f write text    Hope this helps with some of the copy-paste death

User · Answer

When using Google Fonts  your workflow is divided in 3 steps    Select    Customize    Embed   If you look closely  at the right end of the  Use  page  there is a little arrow which allows you to download the font currently in your collection     After that  and once the font is installed on your system  you just have to use it like any other regular font using the font-family CSS directive

User · Answer

Essentially you are including the font into your project    font-face   font-family   Open Sans   font-style  normal  font-weight  normal  src  url  path to OpenSans eot    src  local  Open Sans    local  OpenSans    url  path to OpenSans ttf   format  truetype

User · Answer

The other answers are not wrong  but I found this to be the fastest way    Download the zip file from Google fonts and unzip it  Upload the font files 3 at a time to http   www fontsquirrel com tools webfont-generator Download the results    Results contain all font formats  woff  svg  ttf  eot   AND as an added bonus they generate the css file for you too

User · Answer

3 steps    Download your custom font on Goole Fonts and down load  css file ex  Download http   fonts googleapis com css family Open Sans 400italic 600italic 400 600 300 and save as example css Open file you download  example css   Now you must download all font-face file and save them on fonts directory  Edit example css  replace all font-face file to your  css download   Ex     x000D   x000D   font-face   x000D    font-family   Open Sans   x000D    font-style  italic  x000D    font-weight  400  x000D    src  local  Open Sans Italic    local  OpenSans-Italic    url http   fonts gstatic com s opensans v14 xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w woff2  format  woff2    x000D    unicode-range  U 0460-052F  U 20B4  U 2DE0-2DFF  U A640-A69F  x000D    x000D   x000D   x000D    Look at src  -  url  Download http   fonts gstatic com s opensans v14 xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w woff2 and save to fonts directory  After that change url to all your downloaded file  Now it will be look like   x000D   x000D   font-face   x000D    font-family   Open Sans   x000D    font-style  italic  x000D    font-weight  400  x000D    src  local  Open Sans Italic    local  OpenSans-Italic    url fonts xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w woff2  format  woff2    x000D    unicode-range  U 0460-052F  U 20B4  U 2DE0-2DFF  U A640-A69F  x000D    x000D   x000D   x000D       Download all fonts contain  css file Hope it will help u

User · Answer

just download the font and extract it in a folder  then link that font  the below code worked for me properly   body      color   000     font-family  Open Sans     src url       font Open Sans OpenSans-Light ttf

User · Answer

Check out google webfonts helper  It lets you download every web font of Google and suggests css code for the implementation  This tool also allows you to simply download all formats at once without the hassle      Ever wanted to know where Google hosts their webfonts  This service might be handy if you want to download all  eot   woff   woff2   svg   ttf files of a font variant directly from google  normally your User-Agent would determine the best format     Also take a look at their Github page

[css] Downloading a Google font and setting up an offline site that uses it

Examples related to css

Examples related to fonts

Examples related to offline

Examples related to google-fonts