Posts Tagged ‘’

by David Harned Web Fonts - Group by Font Family
We’ve always worked to ensure Web Fonts is fast, reliable and easy to use. Today I’m excited to announce a new option that many of you (and us) have anticipated for some time. We are now providing the option for Web fonts to be grouped by font family, allowing you to use different weights under one CSS family name. This allows for more standards-based CSS and cleaner HTML within your site.

If you’d rather reference fonts as individual weights, or you’re simply comfortable with the service as it is: don’t worry; we offer this new approach as an option when creating projects – so all of your existing projects haven’t changed. We recommend using this new capability with new projects as you move forward.

I’ll show you how it works.


First, a little background if you’re wondering why our service wasn’t architected this way originally. Grouping Web fonts by family isn’t new; this was always the intention based on the W3C spec for CSS. But, back in 2010 when we launched Web Fonts, browser support wasn’t where it is today.

Back then, while you could group fonts by family using @font-face, these configurations frequently caused Safari browsers in iOS 3 to crash – not something we wanted our customers to experience. This was corrected with iOS 4.2. With users now migrating to iOS 7, this issue is in the distant past, so the time is right for us to make this change.

Let’s take a look at our font handling prior to today’s release.


Historically, our Web fonts have been referenced individually, each within its own family. Today, this remains the default option for new projects, and developers using this existing implementation do not need to make any changes to continue using the service.

As always, you would simply include the JS or CSS reference to our service into the <head> of your site as follows:

<script type="text/javascript" src=""></script>

We handle the @font-face declarations, so you can just reference fonts individually, with each weight in its own family.

font-family:'Metro Nova W01 Regular';
font-family:'Metro Nova W01 Bold';
font-family:'Metro Nova W01 Italic';

Let’s say you want to use a bold weight to show when using the <strong> tag within a paragraph of text. Let’s assume you also have a section of the paragraph you want to render in the italic typeface within that family using the <em> tag.

Your page code would look like this:

<p>This is a paragraph of text and <strong> this section is bold</strong>, while the rest is not. However, <em>this section is italic</em>.</p>

Assuming you don’t want the browser to distort the regular weight font to create a pseudo bold or italic effect, this would require you to call out a new font family every time you wanted to change a typeface to make it bold or italic, so that the different font would be referenced.

Your CSS code would look like this:

p {font-family:'Metro Nova W01 Regular'; font-size:2em;}
p strong {font-family:'Metro Nova W01 Bold'; font-weight:normal;}
p em {font-family:'Metro Nova W01 Italic'; font-style:normal;}

For the bold weight font, you would need to give it a font-weight:normal value since you’d be using the “normal” instance of the bold font. For the italic font you’d also need to assign a font-style:normal value since you’d be using the “normal” instance of the italic font. It’s a bit awkward but required so that the right weights and styles are applied when each font is referenced within its own family.

The end result would look like this:

Not Family Grouped

That works. Now let’s check out the new option you have.


Now there is another way. Once you enable font family grouping, we group the families together and allow control over the CSS font-weight (100–900) and CSS font-style (normal, italic). We default these to values we think would work best, but you can actually set them to whatever works for you and your project.

First, open the project and then launch the “Add & Edit Fonts” window to “Enable Family Grouping”.

Add and Edit Fonts Modal - Default

Then adjust the CSS Font-weight and CSS Font-style – or just leave them as is!

Add and Edit Fonts Modal - Family Grouping Enabled

Once you have everything the way you like it, save your changes. Take a look at your Publish Options, and you’ll see that now the font families are grouped together and you can reference them within a single family like this, instead of as three.

font-family:'Metro Nova W01';

Now, using the example from above, you would reference them this way within your CSS code.

p {font-family:'Metro Nova W01'; font-size:2em;}

The regular (400) weight is used for the default weight. The bold weight (700) is now referenced automatically by the browser when you use the <strong> tag just like the italic version would be referenced when you use the <em> tag. Here is the html again for what gets rendered to the page.

<p>This is a paragraph of text and <strong> this section is bold</strong>, while the rest is not. However, <em>this section is italic</em>.</p>

The end result would look like this.

Family Grouped

Looks the same, but with less code and with code that is more standards based.

Let’s say, however, that the bold weight just isn’t bold enough for your design. Hop back over to the “Add & Edit Fonts” window and change the extra black weight to be “700” and then set the bold weight to something else – not 700 so there is no conflict with the fonts in the family.

Changing the extra black weight to bold

Save your changes and publish your project again. Now the browser will pick up the 700 weight that you assigned and will reference the extra black weight instead. Your page looks like this. Nice!

Family Grouped using the extra black weight


That’s it. You can enable and disable this feature as you see fit for your different projects. Give it a try!

As with any new technology implementation, it is good practice to not try switching an existing live project to enable this feature without some testing, as it very well could affect the rendering of your site, as it will modify the CSS that gets delivered. To avoid disrupting sites on which you’ve already implemented Web fonts, we recommend that you start using the family grouping options with a new project. For more detail on how this feature impacts your CSS, view this FAQ .

We hope this new feature improves your experience with Web Fonts and makes it easier than ever to bring beautiful typography to the Web.

by Johnathan Zsittnik


Attention Web typographers: here’s your chance to try that Web Fonts subscription you’ve been eyeing – and save a bundle in the process! Now through September 27th, save up to 50% off any 3 year plan from Web Fonts: the exclusive service offering the renowned Monotype, Linotype and ITC foundries and coveted designs such as the Helvetica, Frutiger, Avenir, Trade Gothic, Gill Sans and ITC Franklin Gothic families.

To take advantage of this limited time offer, simply choose any 3 year plan and enter coupon code SAVE3 at checkout to get your subscription for 50% off the cost of renewing monthly for 36 months. Pick a plan with the benefits you need: Web Fonts Features

Whether you’re new to Web fonts and looking to take the plunge, an existing subscriber who’s ready to up your commitment, or a user of another service who wants to try Monotype fonts or our exclusive technology, there’s no better time to do so. Sign up now!



by Johnathan Zsittnik

Over the past few months, we’ve unveiled several new tools for type enthusiasts including the redesigned, our Web Fonts Extension for Adobe Photoshop and our FontGazer plug-in. All three were designed to make it easier to browse, experiment with and license type. FontGazer was introduced first, premiering as the first plug-in to enable font trialing and purchasing within Adobe InDesign. Three months later, we’re happy to announce a new version of FontGazer and to officially take it out of beta.

FontGazerWe gathered plenty of feedback from our users during the beta – valuable insights that have helped shape the direction of the product. It’s clear the community loves the concept of in-app font trialing. We also received plenty of suggestions for things to work on. Enhancements found in the latest build include a cleaner, more intuitive UI, a revert button that allows you to return to your default text after applying a font, integration of the new shopping cart, and a revamped, stable architecture. Best of all, FontGazer remains free. Download your copy today and stay tuned for more enhancements to come.

Johnathan Zsittnik
Johnathan Zsittnik is the eCommerce Marketing Manager at Monotype Imaging. Johnathan holds both a bachelor’s degree in marketing and a master’s degree in business administration from Bentley University.

by Steve Lee

We are very excited to introduce Web Fonts – a service you can try for free as of today. We have been working hard to design a service that will allow Web designers to focus on the design of their sites and spend less time contending with workflow complications and design compromises. The disadvantages of displaying text in graphics or other technologies are numerous and have frustrated designers since the early days of the Web. One must invest in and learn how to use image processing software, learn how or work with IT to host these images, and create a process for managing and updating these assets. At the end of this lengthy process, the designer is left with a Web site with text that is difficult for visitors and search engines to access.

Now we can have the best of both worlds. We are no longer confined to handful of ‘Web safe’ fonts – and the text on our site remains just the way we want it: scalable, search engine friendly and easy to edit. Our service puts thousands of fonts at your fingertips. The workflow is intuitive. Select the fonts you like, assign them to CSS selectors and add one line of code to your HTML page. You can change the fonts anytime, without touching the code again. I’ve enjoyed demonstrating this for others. They seem to have an epiphany when the fonts change before their eyes.

Here I will try to show you how you can use a free Web Fonts account to use Web fonts a Web page. In this case, I’m using my blog on

After logging in to, I create a project named ‘blog.’ Next, I add the domain of my site: to it so our service knows where to serve the fonts.

I add some fonts to my project which I then need to associate with the CSS Selectors used in my blog. If you’re not already familiar with CSS selector tags, this article may be helpful. To find out what selectors are used in my blog, I open the ‘Template’ of the blog and I can see that H1, H2, H3 and some other common tags were used. So I add the names of these selectors to my project on the ‘Work on style sheet’ tab. Next, I assign the fonts that I wanted to use to each selectors and click on ‘Save changes and update style sheet’. (Figure 1)

Figure 1

To allow Web Fonts to serve fonts to my blog, I need to paste just one line of code into my HTML. The line of code can be found on the ‘Publish’ tab. I copy the code (Figure 2)

Figure 2

and paste into the blog template right after the <body> tag (Figure 3)

Figure 3

and save the template by clicking “SAVE TEMPLATE CHANGES.” That’s it. The fonts I chose were selected to show a dramatic difference (see figures 4 and 5). In real life, you’ll want to leverage your typographic expertise and design consideration when picking fonts.

Figure 4

Figure 5

If you want to add more or change your Web fonts simply add additional fonts to your project and change the fonts assigned to your selectors. Save the project again and you’re done.

We look forward to your feedback on our service. I believe this is just the beginning of a small revolution. Today the first Web sites are using Web fonts. Tomorrow, we expect to see this technology in consumer electronic devices and beyond.

Great type makes sites stand out