fonts.com blog
Posts Tagged ‘@font-face’

by David Harned

Fonts.com Web Fonts - Group by Font Family
We’ve always worked to ensure Fonts.com 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.

IN THE EARLIER DAYS OF WEB FONTS

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 Fonts.com 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.

EACH WEIGHT GETS ITS OWN FAMILY

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="http://fast.fonts.net/jsapi/8ac15764-9118-4c43-8a15-3fd234faa0e5.js"></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.

GROUP THOSE FONTS BY FAMILY!

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

SUMMARY

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 Fonts.com Web Fonts and makes it easier than ever to bring beautiful typography to the Web.


by Chris Roberts

Here’s a ranked listing of Fonts.com Web Fonts’ top 100 most used Web fonts for June 2013:

Neue Helvetica
Proxima Nova
Trade Gothic
Futura
Gill Sans
Helvetica
Univers
DIN Next
Avenir
Avenir Next
Neue Frutiger
Frutiger
Linotype Univers
Frutiger Next
ITC Avant Garde Gothic
Trade Gothic Next
Humanist 777
Century Gothic
Futura T
Museo Sans
Univers Next
News Gothic
Adobe Caslon
Neue Helvetica
Neo Sans
Optima
Linotype Didot
Avenir Next
Baskerville Classico
Bembo
Arial
Agilita
Rockwell
Monotype News Gothic
DIN 1451
PMN Caecilia
ITC Franklin Gothic
VAG Rounded
Bodoni LT
Soho
Myriad
Brandon Grotesque
ITC Garamond
ITC Lubalin Graph
Corporate S
Helvetica Monospaced
ITC Conduit
News Gothic No.2
New Century Schoolbook
Twentieth Century
Soho Gothic
Neue Haas Grotesk
Sabon
Abadi
Gill Sans Infant
Adelle
Trade Gothic Next Soft Rounded
ITC Officina Sans
Times
Bembo Infant MT
ITC Century
Palatino
Neue Helvetica eText
Sackers Gothic
Klint
Frutiger Serif
Eurostile LT
Letter Gothic
Calibri
Neue Helvetica Arabic
Laurentian
Eurostile Next
Harmonia Sans
Bauer Bodoni
Camphor
Helvetica World
Garamond 3
Akko
Museo Slab
Memo
Adobe Garamond
ITC Franklin
ITC Fenice
Clarendon
Yakout
Effra
Minion
Novecento
MSung
New Caledonia
Monotype Baskerville
Plantin
Sassoon Sans
Museo
Ascender Serif
Compacta
Slate
Cachet
ITC Officina Serif
Aachen


by Johnathan Zsittnik

Our Fonts.com Web Fonts service has always provided great typefaces. Now it’s even easier to create great typography – thanks to the addition of the Typecast  design tool.

Subscribe or upgrade to a Professional subscription now.

Subscribe-Now


New Professional subscriptions from $40/month

Fonts.com Web Fonts Professional PlanExcellent news: We’ve redefined our Professional subscriptions to make them more affordable, plus we’re including a free Typecast subscription (worth $29 per month) with every Professional plan. From new fonts and our most popular fonts hand-tuned for the Web, to new technology such as OpenType feature support and new services like Typecast, we’re always adding more to our Fonts.com Web Fonts subscriptions and will continue this trend going forward.

Our new Professional plans start at just $40 per month and include 1M pageviews per month, but you can add additional pageviews as needed. Like before, Professional plans also include the self-hosting option and desktop fonts for creating website mockups. If you’re currently subscribed to a Professional plan or a 1M, 1.5M or 2M pageview Standard plan, we’ll upgrade your account automatically to make life easy.

Create better Web typography with less hassle

Just as exciting is the free Typecast subscription you’ll get with your Pro plan. This tool could completely reshape the way you build websites.

3_color palette

Typecast is a powerful, browser-based design app that takes the pain out of designing with Web fonts. It lets you view, pair and compare Web fonts in the browser on full-length text without having to create screenshots, assemble comps or hand-code your CSS. Sliders, drop menus and simple inputs make it easy to set text in precise detail, and because you’re designing in the browser, you’re able see changes in real time and make better, faster decisions about quality, style and rendering.

As you design, standards-compliant HTML and CSS is produced behind the scenes, allowing you to quickly share Web-ready designs with developer colleagues and get more accurate prototypes in return. In the video below, Typecast’s Creative Director Jamie Neely offers you a look at the app in action:

Typecast — Experiment with Type from Typecast on Vimeo.

Typecast + Fonts.com Web Fonts: the perfect type pairing

Best of all, Fonts.com and Typecast work great together. You can design with every one of our 20,000 Web fonts in Typecast. Your Fonts.com account is linked to Typecast, so getting your design’s Web fonts onto your website is simple. When you’re ready to export your designs and start prototyping, Typecast will determine which fonts to serve up and provide an embed code that includes them. Going forward, you can continue to use Typecast to manage the font selections in your projects.

We want to play a part in reshaping typography on the Web, and feel this combination will help you make sound typographic decisions and refinements with the Fonts.com typefaces you know and love. To our new and current subscribers, we hope you enjoy Typecast. We sincerely believe it will help you create far better designs. We also believe it makes Fonts.com Web Fonts a far better offering and remain committed to growing these plans  with additional great services like Typecast as your needs evolve.

Subscribe-Now


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 Bill Davis

Last month, I was honored to give a presentation at the ATypI Hong Kong 2012 Conference titled “Solving the Challenges of Asian Web Fonts.”

To view my ATypI presentation on Slideshare, click here http://slidesha.re/XUpldI

The Fonts.com Web Fonts service features the widest language support including many non-Latin scripts (Cyrillic, Greek, Thai, Arabic, Hebrew, Armenian and Devanagari) and East Asian fonts (Simplified and Traditional Chinese, Japanese and Korean). Our experience in being the first to support this broad range of languages and scripts has allowed us to gain insights into early adoption of non-Latin and Asian Web fonts by Web designers and developers.

The main benefits of Web fonts, no matter the language or geographic market for your audience, are:

  • Establish typographic consistency
  • Improve user experience
  • Eliminate the use of text as graphics, improve workflow
  • Enhance SEO, accessibility

technology adoption cycle with web fonts

When we surveyed the most visited websites across the globe, we found that 10 to 15 percent are already using Web fonts. But for East Asian languages and scripts, only a handful has started to deploy Web fonts. Why is that?

Consider the two primary challenges for developers of Asian websites:

  • Website design issues
  • Asian Web font file sizes

Most Asian websites are very text intensive, using large amounts of text at small sizes with very little use of white space like most “western” style websites. Web fonts can benefit headlines and replace images. For smaller amounts of text, system fonts have typically been used but now more typographic options are becoming available to designers.

Asian web sites

The second challenge for Asian website designers is how to overcome the huge file sizes. Chinese, Japanese and Korean fonts can range in size from 2MB to 10MB. Linking to multiple font files of this size is not an option for most developers due to latency concerns.

cjk web fonts dynamic subsetting

The best solution is dynamic subsetting – where a small Web font file is built and downloaded on the fly (using the characters only found on each page). Fonts.com Web fonts deploys dynamic subsetting on all its Asian Web fonts, so fonts get downloaded in milliseconds and not minutes. To learn more and see an interactive demo of Dynamic Subsetting, visit http://fontsubsetter.com/.

With all the positive attention that Web fonts are receiving globally, I believe that this is the year non-Latin and Asian Web fonts take off!


by Johnathan Zsittnik

Adobe LogoThe best selection of Web fonts is about to get even better. We’ve teamed up with Adobe to offer hundreds of their typefaces, including the most popular designs from the Adobe Originals catalog, through Fonts.com Web Fonts. Adobe fonts are well known for their quality and artistry and have become resources for design professionals. With many of their families being staples at the top of our list of best selling desktop fonts, we’re proud to offer these designs as Web fonts.

The collection includes hundreds of Web fonts including such design mainstays such as the Chaparral, Minion and Myriad families.  Many of these designs have been optimized for on-screen display.

In the coming weeks, the first batch of these designs will appear directly in our selection of Web fonts with additional releases to follow shortly thereafter. These fonts will be available for use by everyone subscribed to a Fonts.com Web Fonts Standard or Professional plan. Stay tuned. As always, more releases from world-class designers and foundries are headed your way.

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 Chris Roberts

Here’s a ranked listing of Fonts.com Web Fonts’ top 100 most used Web fonts for July 2012:

Neue Helvetica
Futura
Trade Gothic
Neue Frutiger
Avenir Next
Frutiger
Helvetica
Avenir
Gill Sans
DIN Next
Univers
ITC Avant Garde Gothic
PMN Caecilia
New Century Schoolbook
Neo Sans
Trade Gothic Next
Linotype Univers
Memo
Times
Frutiger Next
Harmonia Sans
Arial
Neue Helvetica Arabic
Garamond 3
DIN 1451
Linotype Didot
ITC Officina Sans
VAG Rounded
Twentieth Century
Slate
Monotype News Gothic
Yakout
Frutiger Serif
Century Gothic
Soho
Bauer Bodoni
Rockwell
Sackers Gothic
ITC Lubalin Graph
Glypha
Calibri
Soho Gothic
Eurostile LT
ITC Garamond
Aachen
Laurentian
MHei
Egyptian Slate
Agilita
Plate Gothic MT
Optima
ITC Franklin Gothic
Heisei Kaku Gothic
Cachet
Plantin
Clearface Gothic MT
Clarendon
Monotype Garamond
Futura T
Akko
ITC American Typewriter
M Hei Simplified Chinese
ITC Conduit
Serifa
ITC Officina Serif
Klint
Abadi
Monotype Grotesque
ITC Stone Informal
ITC Legacy Serif
M Hei Traditional Chinese
News Gothic
Stymie
Neue Helvetica eText
TB Kaku Gothic
FB Cham Blue
Neuzeit Office
Neue Haas Grotesk
Ocean Sans
Amasis
Monotype Modern
Eurostile Next
Camphor
Bell
Adelle
MSung
Baskerville
ITC Franklin
Georgia
Bembo
Gazette
Consolas
Andale Mono
Droid Sans Mono
Museo
Calvert
P22 Underground
Wiesbaden Swing
Rotis Sans Serif
Mitra


by Chris Roberts

Here’s a ranked listing of Fonts.com Web Fonts’ top 100 most used Web fonts for June 2012:

Neue Helvetica
Trade Gothic
Futura
Frutiger
Gill Sans
Avenir
Helvetica
DIN Next
Univers
ITC Avant Garde Gothic
Neue Frutiger
Avenir Next
New Century Schoolbook
PMN Caecilia
Trade Gothic Next
Linotype Univers
Neo Sans
Times
Neue Helvetica Arabic
DIN 1451
Linotype Didot
Arial
Frutiger Next
Harmonia Sans
Slate
VAG Rounded
Garamond 3
Memo
Yakout
Monotype News Gothic
Soho
Bauer Bodoni
Frutiger Serif
Sackers Gothic
Laurentian
ITC Officina Sans
Rockwell
Gothic
Futura T
Heisei Kaku Gothic
Cachet
Eurostile LT
Glypha
Soho Gothic
ITC Franklin Gothic
Akko
Century Gothic
Egyptian Slate
ITC Lubalin Graph
Plate Gothic MT
Monotype Grotesque
ITC Legacy Serif
Monotype Garamond
Calibri
Optima
Museo
Plantin
Neue Helvetica eText
Adelle
Neue Haas Grotesk
ITC Officina Serif
Clarendon
Aachen
Ocean Sans
News Gothic
ITC Stone Informal
Amasis
ITC Garamond
Consolas
Andale Mono
Droid Sans Mono
Bell
Monotype Modern
Klint
Azbuka
ITC Conduit
ITC American Typewriter
ITC Franklin
Wiesbaden Swing
MYuppy
Baskerville
Impact
Eurostile Next
Georgia
Linotype Feltpen
Camphor
Mitra
Gazette
P22 Underground
ITC Caslon No. 224
Calvert
Bembo
Rotis Sans Serif
Neuzeit Office
Memphis
Serifa
Agilita
Abadi
Janson Text
Loft


by Chris Roberts

Here’s a ranked listing of Fonts.com Web Fonts’ top 100 most used Web fonts for May 2012:

Neue Helvetica
Trade Gothic
Futura
DIN Next
Frutiger
Gill Sans
Avenir
Helvetica
Univers
ITC Avant Garde Gothic
Neue Frutiger
Futura T
Slate
Trade Gothic Next
New Century Schoolbook
PMN Caecilia
Avenir Next
Neo Sans
DIN 1451
Linotype Didot
ITC Lubalin Graph
Linotype Univers
Frutiger Next
Arial
Garamond 3
VAG Rounded
Neue Helvetica Arabic
Harmonia Sans
Times
Monotype News Gothic
Yakout
Bauer Bodoni
Soho
Heisei Kaku Gothic
Laurentian
Soho Gothic
Gothic
Rockwell
Eurostile LT
Egyptian Slate
Cachet
Glypha
ITC Franklin Gothic
Memo
Century Gothic
Monotype Grotesque
Plantin
Akko
Camphor
Neue Helvetica eText
Sackers Gothic
Plate Gothic MT
News Gothic
ITC Officina Sans
Clarendon
ITC Stone Informal
Monotype Modern
Aachen
Ocean Sans
Amasis
FB Han Gothic
Bell
ITC American Typewriter
Azbuka
Consolas
Andale Mono
MYuppy
Droid Sans Mono
Frutiger Serif
Eurostile Next
Linotype Feltpen
Walbaum
Optima
ITC Garamond
Mitra
Wiesbaden Swing
Baskerville
Neue Haas Grotesk
Adelle
ITC Conduit
Bembo
Monotype Garamond
Impact
ITC Kabel
ITC Franklin
Neuzeit Office
Calibri
Rotis Sans Serif
Gazette
ITC Legacy Serif
Klint
ITC Officina Serif
Abadi
ITC Caslon No. 224
Loft
Museo
Neo Tech
Calvert
P22 Underground
Bodoni LT


by Ryan Arruda

Employing over 168,000 people across the globe, Sony is a worldwide electronics manufacturer, specializing in computer, video, and audio products for both consumer and professional audiences.

The Sony homepage employs the ITC Avant Garde Gothic typeface family, using book and medium weights for its headlines and subheads. This classic geometric sans is quite appropriate for an electronics purveyor, as its inherent structure projects a demeanor of modernity. However, with its large x-height, ITC Avant Garde Gothic remains grounded and relatable, conferring warmth where other geometric faces might offer colder personalities.

Customer Spotlight: Sony

 


by Chris Roberts

Here’s a ranked listing of Fonts.com Web Fonts’ top 100 most used Web fonts for April 2012:

Neue Helvetica
Trade Gothic
DIN Next
Futura
Frutiger
Avenir
Helvetica
ITC Avant Garde Gothic
Trade Gothic Next
Neue Frutiger
Gill Sans
Univers
New Century Schoolbook
DIN 1451
PMN Caecilia
ITC Lubalin Graph
Neo Sans
Avenir Next
Linotype Didot
Frutiger Next
Monotype News Gothic
Slate
Futura T
VAG Rounded
Linotype Univers
Harmonia Sans
Garamond 3
Camphor
Gothic
Heisei Kaku Gothic
Bauer Bodoni
Soho
Rockwell
Laurentian
Soho Gothic
Eurostile LT
Glypha
News Gothic
Plantin
ITC Franklin Gothic
Sackers Gothic
Egyptian Slate
Clarendon
Century Gothic
Cachet
FB Han Gothic
Ocean Sans
Plate Gothic MT
ITC Officina Sans
Monotype Grotesque
MYuppy
Gill Sans Infant
Charlotte Sans
Neue Helvetica eText
Bell
ITC American Typewriter
Arial
ITC Blair
ITC Franklin
Bembo
Optima
Monotype Modern
Calvert
Eurostile Next
Wiesbaden Swing
Aachen
ITC Garamond
Neuzeit Office
Mitra
Baskerville
Amasis
Abadi
Adelle
Neo Tech
ITC Kabel
Serifa
ITC Conduit
Monotype Garamond
Walbaum
Klint
ITC Officina Serif
Impact
ITC Bailey Sans
URW Franklin Gothic
Bell Centennial
Akko
ITC Stone Sans
ITC Caslon No. 224
Tahoma
Basic Commercial
Museo
Linotype Feltpen
Rotis Sans Serif
Siseriff
Figural
Droid Sans
Mundo Sans
TB Kaku Gothic
Times
Bodoni LT