Download Google Fonts to your MAC with one line of code (Bonus tip at the end)

Introducing Google Fonts

Google fonts are open-sourced fonts, optimised for the web, where you can select, preview and choose fonts. Often used by developers for use in website development,  the Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:

I wanted to select a font for my signature in my emails , I wanted a fontface that had a slant and that was decorative, withnice flourishes around the D, J and K which are my initials.  

Install all Google’s fonts onto your computer with one line of code

If you’re a typography buff like me, you will love this – it automatically installs over 1,600 fonts onto your terminal.  

Mac users:
Paste this line of code in Terminal curl https://raw.githubusercontent.com/qrpike/Web-Font-Load/master/install.sh | sh Updating:

To update the fonts, just re-run this script. It will overwrite duplicates.
You may need to restart for Font Book to pick up the new fonts.

Photoshop Users:
When using this script, it installs A LOT of ( ~1660 ) fonts. You may have to disable “Font Preview” in Photoshop.

To Uninstall all Fonts
curl https://raw.githubusercontent.com/qrpike/Web-Font-Load/master/uninstall.sh | sh

The instructions for Linux users can be found on Github: 
 https://github.com/qrpike/Web-Font-Load 

Like this? Please follow the authors on Twitter:

Quinton Pike – @quintonpike
Peter Stacho – @stacho

 

PRO TIP 2: How to improve website speed when using Google Fonts 

Using Google fonts on your website can affect the page load times, as certain font files come with multiple variants and glyphs. These may be very big files that need to be downloaded onto the visitor’s computer.

Digital Inspiration’s Amit Agggarwal offers a nifty solution for this: – by modifying the CSS to specify the  alphabets or characters that you want, you can instruct the site to render only the alphabets that are required,  reduce the file size of the font being downloaded. 

You can find more detailed “How To” instructions on his website, where he uses font Cabin Sketch as an example. 

Add %20, %27and %22 if you want to include the space character , single quote (‘) and double quote (“) respectively. 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s