How to Reduce the File Size of Google Fonts for your Website

Google Fonts make web pages look beautiful but external fonts can also increase the page load time of your website. Learn how to reduce the size of Google font files.

Google Fonts is a collection of open fonts that you can use in your websites, documents and other design projects without any restrictions around licensing.

It takes a single line of code to embed any of the Google Font families into your website design. Just substitute the font family in the following code (line #2) with the name of Google Font and copy-paste it inside the tag of your HTML template.

While Google Fonts can make your website look good, there’s one related problem – they increase the page load time of your website because the font files have to downloaded on the visitor’s computer and some of them, like the Cabin Sketch font, can exceed 100 KB in size.

There is however an easy workaround to help you reduce the file size of the Google Fonts so that they do not reduce the load time of a web page. Instead of using the entire Google font family, you can specify a limited set of letters or digits that are used in your text and Google will dynamically generate a new font file containing only the requested characters.

All you have to do is add a new text parameter to the Google font request URL and value of this parameter will have all the letters that you need.

For instance, if I need to render the text Digital Inspiration in Cabin Sketch font, the modified CSS requesting the Google font file will look something like this:

The original Google font file was around 101 kb but with this limited text, the font file is reduced to 7.6 KB.

Google Fonts are commonly used to render the text of logos and and headings (h1, h2, h3, etc.) on a web page so you can modify the CSS accordingly. Alternatively, if you wish to request all alphabets and numerals in the Google Font but none of the extra glyphs, your font CSS will looking something like this:

The font file in this case is 37 KB in size and that’s still 64% lower than the original Google font file. Also, if you are wondering why I have included %20 in the text list, it represents the encoded space character. Similarly, you can add %27 and %22 to the list for single quote (‘) and double quote (") respectively.

View the original article here

ProFont Makes Terminal and Code Readable at Nearly Any Size [Fonts]

Windows/Mac/Linux: If you've ever hacked around in your computer's terminal or command prompt, you've had moments where there's way too much text to fit on your screen. ProFont, made especially for terminals and programming, is meant to be tiny, so you can read lots of data all at once.

Coders are more than a little particular about their comfortable setup, so ProFont may not be a new default setting in editors of choice. But for those want to give it a go, or for casual users who'd like something that's very readable at any size, ProFont is a nifty little font that lets you fit more text onto a screen and scan it for what you're looking for. I learned about ProFont from a programmer who said it was his first post-installation step on any Mac he uses, and I've found a small but dedicated set of fans for ProFont on the web.

Installing ProFont isn't always obvious. Here's a good how-to for Ubuntu, and an easily installed version for Windows. The Mac version from Tobias Jung's site should be straightforward to plug in.

ProFont for Windows, for Macintosh, for Linux | Tobias Jung