Category Archives: Google Web Fonts Blog

Posts from the web fonts team, working to make the web beautiful

Raising the quality of fonts in our collection

Since the new Google Fonts directory launched in May, we’ve been hard at work improving the quality of the fonts in our collection. In June we invited a team of typeface designers and font engineers from around the world to our New York City offices  to kick off a 4-months font improvement project. Each member of the team was selected for their extensive industry experience in type design or font production:

  • Jacques Le Bailly (Latin type designer)
  • Lasse Fister (font engineer)
  • Marc Foley (font engineer)
  • Kalapi Gajjar (Indian type specialist)
  • Thomas Jockin (Latin type designer)
  • Nhung Nguyen (Vietnamese type specialist)
  • Alexei Vanyashin (Cyrillic type specialist)
The team was tasked with improving the quality of fonts in our catalog. During the first week we examined the entire Google Fonts collection to determine the strengths and weaknesses. We considered various possible approaches to improving quality, and at the end of the week we decided to focus on typefaces that were already widely used and had great potential. We divided the project into three sprints.

Design work consisted of adding glyphs to support more languages, fixing incorrectly placed or shaped accent marks, re-spacing the type’s metrics and kerning, and in some cases re-drawing the designs from scratch. In each sprint we spent one week on quick improvements to one or two families, and three weeks for a deep dive on a single project.

To ensure we maintained a high standard of work and stayed true to the original intent of each design, our entire design process was done in the open (on GitHub) and was regularly documented in the Google Fonts Discussions Group. For each design, our team critiqued each other’s work, and kept in touch with the original designers whenever possible.
Pacifico - Comparison of original and new fontsQuicksand - Comparison of original and new fonts
Pacifico and Quicksand
In the coming weeks, our team will push the new versions of these fonts. Updated fonts will appear in the Google Fonts directory, and the new higher quality designs will automatically benefit any site or product that uses the Google Fonts API.

Larger, deep-dive projects:
Alfa Slab One, Cabin + Cabin Condensed, Comfortaa, Didact Gothic, Inconsolata, Jura, Maven Pro, MuliNunito (and a new Nunito Sans!), Pacifico, Quicksand, RubikVT323.


Smaller projects with wider language support:
Anaheim, Anton, Arvo, Bad Script, Bangers, Bevan, Bitter, Cabin Sketch, Cutive Mono, Dancing Script, Francois One, Homenaje, Indie Flower, Kurale, Lobster, Lora, Marmelad, Metrophobic, Merriweather, Neuton, Oswald, Play, Podkova, Poiret One, Prata, Press Start 2P, Raleway, Rokkit, Ropa Sans, Rubik Mono, Share Tech, Sigmar One, Telex, Trocchi, Varela Round, Yanone Kaffeesatz.


Keep watching this blog for new posts by the team summarizing their type design processes, thoughts and decisions.

Posted by Dave Crossland, Program Manager

Adobe Typekit improves the Rosario typeface family

Since 2010, Google Fonts been collaborating with the Adobe Typekit team to create better web font technology. And now that many fonts first published by Google Fonts are also available in Adobe Edge Web Fonts, we’re extending that collaboration beyond just software to fonts themselves.

Together with Adobe, we want to improve the quality of open source fonts available to everyone publishing on the web. As a first step, the Typekit team has optimized Rosario, a humanist sans serif based on the classic proportions of Garamond’s type.

To start the process, Typekit reached out to the foundry, Omnibus Type, to request up to date copies of the font source files. Here are some examples of the possible optimizations that the Adobe team might make to a web font:

  • Convert and/or clean up outlines, for design fidelity and file size efficiency
  • Re-componentize source fonts, for file size efficiency
  • Remove/reassign glyphs with incorrect Unicode code points, for semantic value
  • Add common missing glyphs (non-breaking space, soft hyphen)
  • Set vertical metrics values according to best practices
  • Set underline and strike-through values, for design consistency
  • Contribute PostScript hints and (if a typeface was designed for small sizes like paragraph text) TrueType instructions (also called hinting), which consist of instructions to the rasterizer embedded in the font file itself

After making some of these improvements, Typekit sent their version back to the foundry to review and release on the Omnibus Type homepage. The updated Rosario family is now available in Typekit, Adobe Edge Web Fonts and Google Fonts.

Together with the Typekit team, we’re looking forward to more quality improvements in the future!

A new look and name for Google Web Fonts

This week, Google Web Fonts got a simpler, cleaner look that makes searching and accessing your fonts easier than ever. And in the spirit of simplicity, today Google Web Fonts is now just “Google Fonts.” It’s still the same great collection of free fonts you know and love, but with a new name.


You can get started with Google Fonts here: www.google.com/fonts

Posted by Ajay Surie, Product Manager

Easier ways to find the right font

We know that finding the right font for your website or blog is a personal choice, and there are many great fonts available to choose from on the web. Now when you search for a font that isn’t available on Google Web Fonts, we show you additional fonts available from Monotype. Each result is shown in the actual font so you can easily preview your options. To get more information on a font, simply click the link under it’s name.

 

We look forward to adding results from more web font providers in the future.

Posted by Raziel Alvarez, Software Engineer

Web fonts: a look under the hood

Google Web Fonts are viewed more than 1 billion times every day across the web, on more than 100 million web pages. To help you sort through and pick the right font for your site you can order fonts by popularity, and now you can check out usage data for each font too.

Click on "Analytics" in the upper right corner of the homepage to view the new analytics tab, where you can see and compare numbers for individual font views by browser, operating system and see usage trends.


You’ll see a list of fonts, ranked by the total number of all-time font views and sortable by time period. To see a graph of font data for an individual font or a set of fonts, check the box next to the font name and click on the Trend button.



Clicking the views by platform tab on the left pane shows you a heatmap and pie charts of usage of each font by browser or operating system.



While browsing through fonts in the directory, you can also access analytics for an individual font at anytime by navigating to the Statistics tab on the font’s specimen page.



And finally, to help you compare and select fonts, clicking on the “Pairings” tab on the Specimen page will show you groupings of fonts that are frequently used together, based on actual usage data via the API.


Selecting the right font for your website is an expression of your personal style, and we hope to continue expanding the set of tools to help you do that. Happy browsing!

Posted by Raziel Alvarez, Software Engineer

More places to get great fonts

Open source fonts are good for the web: they’ve helped spur web font adoption, and made it easier for anyone to contribute improvements to fonts for the whole web community.

Today, we’re happy to announce that all the fonts in the Google Web Fonts directory are also available via Adobe’s new Edge Web Fonts service.

And on the heels of the recent release of Source Sans Pro, another Adobe designed open source font, Source Code Pro, is available today from both Google Web Fonts and Edge Web Fonts.

We’re also working with the Adobe team to hint some of the fonts in the collection, a process that will make them look better at smaller text sizes.

Here’s to a more accessible, translatable, and beautiful web!

Posted by Ajay Surie, Product Manager

Preview fonts with the new Poster mode

Selecting just the right font for your website or application is a personal decision, and making sure the font harmonizes with your content is often time consuming. To help you narrow down your font choices, last week we announced a new tool to compare individual characters in a pair of fonts side by side. Today, we’re introducing Poster Images, which allows you to easily see what a font looks like with different effects, on a variety of different backgrounds.

To start, visit the Google Web Fonts directory and select the Poster tab at the top.




Change the font size or the appearance of the poster to check out how different styles look. When you find a font you like, hover over it to see more details and add it to your collection.
















We hope this makes choosing the right font easier and more fun!

Posted by Sang Tian, Software Engineering Intern

New Fonts, Early Access, and More

Over the last few months, we’ve been busy adding support for web fonts to Google documents and Google presentations. Today, we’re adding seven font families in Google Web Fonts, a new tool to compare similar fonts, and an early access program to get feedback on non-latin scripts in development.

When you choose a new font, you want it to look good for all your readers, regardless of the platform or browser they’re using. To help make fonts look better in more places, we’re starting to hint more families in Google Web Fonts, thanks to the ttfautohint project, which automates this process. Amarante, Capriola, Courgette, and Quando were hinted using this tool.

Eagle Lake expands on our existing collection of calligraphic font styles, and you can use Metal Mania to bring out your inner guitarist. We’re also very excited to be including a special contribution from our friends over at Adobe - Source Sans Pro, their first open source type family.

As the number of fonts in Google Web Fonts continues to grow, it’s becoming harder to select the right font from among many potential choices. To make this process easier, you can now easily compare two fonts side by side using the new comparison tool. Just add a few fonts to your collection, select Review, and click on the Compare tab at the top.



You can then overlay glyphs from each font on top of each other, and use the slider to transition between fonts to see the differences between them more clearly.

Non-latin fonts can be more complex than latin fonts, both as designs and as font software, which often require more time to develop and polish. The designers of these fonts may not be native readers, and we’re hoping for your feedback to help them understand where their fonts need improvement. You can try them out by downloading them from the Google Web Fonts early access page.

Posted by Ajay Surie, Product Manager

450+ new ways to make your Google presentations pop

(Cross-posted from the Google Drive blog)

Good design is an important part of getting your point across in a presentation. Over time we’ve added a bunch of features to help you bring a little something extra to your decks, like slide transitions and animations, thousands of free stock photos, and a growing collection of templates.

Today, creating eye-catching presentations gets even easier, with more than 450 new fonts to choose from. (flip through the presentation below to see them in action)



To browse and select new fonts, click on Add fonts from the bottom of the fonts dropdown in the toolbar. This will take you to the menu of all available fonts, where you can pick the ones you want to use.


Any fonts that you select will get automatically added to your fonts list so it’s easy to find them later.


Plus, fonts that you’ve already added to Google documents will automatically appear in your presentations font list too.

So next time you're working on a presentation, jazz it up with some Calligrafitti, Indie Flower, Short Stack, or hundreds of other new choices.

Posted by Erin Rosenbaum, Software Engineer

Google documents, now with web fonts!

(Cross-posted from the Google Docs Blog)

In the past month we’ve made updates both big and small to Google Docs, and today we’re announcing one more: web fonts in Google documents. Often the best way to get your point across is to present your idea in a creative, captivating way. Today, we added over 450 new fonts to Google documents to make it easier for you to add a little something extra to whatever you create.

To use these new fonts, click on the font menu and select “Add fonts” at the very bottom, which will take you to a menu of all the Google Web Fonts available.


Once you’ve selected new fonts, you’ll be able to select them from the font menu.


Whether you’re looking for the perfect font for your first comic book or fancy handwriting for your wedding invitations, we hope you try out the new fonts and create some eye-catching documents.

In addition to hundreds of new fonts, we have a lot of other exciting updates to report:
  • Google Drive launched as a place where you can create, share, collaborate, and keep all your stuff. 
  • There are now a few more options for inserting images in Docs, including inserting from Google Drive, searching for images from the LIFE Photo archive, or taking a snapshot with your webcam. 
  • Charts in spreadsheets now has support for minor gridlines and options to customize the formats of axis labels 
  • Accessibility in Docs got better with support for screenreaders in presentations and with the addition of NVDA to our list of supported screenreaders
  • From File > Page setup... you can now set the default page size for your new documents. 
  • It's now easier for speakers of right-to-left languages by automatically showing bidirectional controls when you type in a language that might use them. 
  • Apps Script had many improvements, including 
    • A new ScriptService for programmatically publishing your scripts and controlling when they run. 
    • A new function to find the root folder of someone’s Drive. 
    • An increase in the allowed attachment size in emails from 5MB to 25MB. 
    • An increase in the size of docs files you can create from 2MB to 50MB. 
  • There are now over 60 new templates in our template gallery.