Menu
I've learnt that Google automatically serves TTF, EOT, WOFF, or SVG font files depending on the browser / device it's accessed from.
Now I am planning to host and serve the font files from my server itself, for which I would first have to download all the file formats of the web font(s).
How or where can I download the 4 file formats for a web font that I would like to use?
PS: By using different browsers -- Chrome, IE9 and Safari (dev - iPhone UA), I was able to get the WOFF, EOT and TTF formats. No luck with the SVG format though. It would be awesome if there's an even simpler way.
EDIT: Oh, and by the way, I do know that I can download various formats from fontsquirrel, but I am talking about downloading from the official repo here.
442
Go to https://fonts.google.com/ and start clicking every, single, font, and every, single, font weight (better get some food and drink ready, it might take a day or two) Google will provide a <link href="https://fonts.googleapis.com/css?family= with all the fonts appended.
To add google fonts, search for the google fonts, select the font category and family, then select the font style of your choice. Once you select the font, “copy the font link”, from the “selected families windows” and paste it in the head section of the HTML file.
Just go to the page you want, click on "Show page source" or "show page resources" in the Developer menu (both work for this) and the page resources are listed in folders on the left hand side. Click the font folder and the fonts are listed. Right click and save file.
Open https://fonts.google.com/, select two font families by clicking a plus symbol "+" next to their title. Open the block titled "Family Selected" at the bottom of the screen. Copy the CSS link that contains both font families. In the Google Fonts tab, paste the link into the CSS input field.
I've learnt that Google automatically serves TTF, EOT, WOFF, or SVG font files depending on the browser / device it's accessed from. Now I am planning to host and serve the font files from my server itself, for which I would first have to download all the file formats of the web font (s).
For the basic font, it gets all four formats (woff, ttf, svg, eot). Google doesn't seem to serve SVG and EOT files for the bold and italic weights. Once it's in a .ps1 file, it can be called with the fonts to download as arguments:
Loading google font is easy. If we visit Google Font page, for example Open Sans Font. we can see the instruction to add the font in our web page. If we need to load multiple font weight (for example 400 (normal) and 700 (bold), we can use this pattern in the URL Font+Name:400,700.
Like any other asset, font files have to be downloaded to a site visitor's computer before they can be displayed. Fonts served by the Google Fonts API are automatically compressed for a faster download, and once downloaded are cached in the browser and reused by any other web page that uses the Google Fonts API.
======= UPDATED 2016-05-31 =======
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:
I got tired about updating this answer on each new release of Chrome, because they always change the way you can spoof the User Agent string, so please use this script instead.
======= OLD SOLUTION =======
Using DevTools from Chrome you can override the User Agent.
How to:
Spoof user agent select IE9 for EOT format, Android 4 for TTF and this UA String for SVG: Mozilla/4.0 (iPad; CPU OS 4_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/4.1 Mobile/9A405 Safari/7534.48.3 (thanks anonymous)
159
You can clone the Google webfonts directory at http://code.google.com/p/googlefontdirectory/
You can also get single font files at http://code.google.com/p/googlefontdirectory/source/browse/#font_name
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
