fonts.com blog
Posts Tagged ‘css’

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 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 Sampo Kaasila

The fact that all major Web browsers now support Web fonts is of course a great step forward for typography on the Web. However, not all Web browsers support the ability to use advanced typographic  features that are part of OpenType fonts, such as standard and discretionary ligatures, contextual alternates, small caps, fractions, swashes  and more. For this reason, it is important to know that OpenType font support is different from OpenType feature support.

OpenType fonts are supported by wrapping them into a WOFF container, or sometimes directly without the WOFF container.

The following example demonstrates text with and without standard ligatures.

standard ligatures

 The next example uses discretionary ligatures on the common ‘st’ letter combination.

discretionary ligatures

The text strings and character codes in the HTML stay the same no matter what OpenType features are used or not used. Instead, these features are simply controlled with the style, typically from the CSS file .

Unfortunately, the support for OpenType substitution features is not yet broadly available in Web browsers. The good news is that nearly all of the most recent releases of browsers offer some level of support for OpenType features or are expected to add support soon. This means that Web browsers are moving in the right direction. However, as of now, good support is missing from the most commonly used browsers. Moreover, it takes years to flush out old browsers from the market. All this has prevented the wide use of these OpenType features on the Web, until now .

Monotype is pleased to announce the beta release of a new cloud font technology solution within the Fonts.com Web Fonts service that makes it possible to immediately use these features in any browser that supports Web fonts.  For browsers that do not have solid support for OpenType substitution features, the cloud takes the information from the GSUB table in the font and compiles it into compact JavaScript code that these browsers can handle. The JavaScript code automatically transforms the glyph shapes into new, beautiful and typographically correct shapes.

As a Web designer, you can simply use standard CSS techniques for controlling these OpenType features, while relying on our service to ensure the page renders beautifully and as intended no matter what browser the visitor is using.

Fonts.com Web Fonts OpenType Features Control

To use this capability, sign in to your Fonts.com Web Fonts account and follow these steps

  1. Add one of the fonts listed here to a project. Be sure to select the version containing OT Features in the name. This list will grow rapidly, but for now, it will provide you with a few options to play around with.
  2. Open the Add & Edit Fonts control within your project on the Manage Web Fonts page.
  3. Click the OpenType Features tab and Use the Selector field to enter the names of the CSS selectors you would like to display using a font containing OpenType features.
  4. Choose the font containing OpenType features from the Select a font dropdown menu.
  5. A list of icons representing the OpenType features contained in the font will appear.
  6. Click the icon of any OpenType features you would like to use on your website.
  7. The preview text will change based on the OpenType features you select. (If nothing happens, modify the sample text in the ‘Test your own text here’ field to ensure your text string contains the necessary characters.
  8. Publish your project.

Check out this technology and start using OpenType features on the Web!


by Johnathan Zsittnik

Today Monotype announced the acquisition of Design By Front, makers of Typecast – a browser-based tool for designing Web pages with Web fonts. Design By Front has been a valued partner of the Fonts.com team and we couldn’t be happier to have them as part of the family.

We welcome a talented group of individuals with intimate knowledge of creative markets and the challenges Web designers face. Over the past year, we’ve worked closely together. We’ve helped integrate our Fonts.com Web Fonts service into Typecast and participated in its private beta. We’ve also collaborated on speaking sessions and interviews about Web typography. This move ensures that these collaborations will continue, and we think you’ll like the outcome.

Typecast TeamTypecast was born out of the desire to make Web fonts easier to use. We’ve shared that aspiration at Fonts.com, yet our focus in achieving this goal has been limited to the usability of our own Web font service. With Typecast in the fold, we can ensure Web fonts are easy and fun to use throughout the entire design process – from ideation to implementation.

Typecast allows designers to work more efficiently with Web fonts. So it only makes sense that we make this powerful tool readily available to Fonts.com Web Fonts subscribers. While we won’t disrupt Typecast’s compatibility with other services, we also intend to make it easier for Typecast users to select our own Web fonts.  We believe this relationship will benefit users of Typecast and Fonts.com Web Fonts. We also hope it will help inspire more designers to choose Web fonts for their next project, resulting in a more beautiful and readable Web.

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 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 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 Ryan Arruda

With over 11 million daily patrons, Burger King is one of the largest fast food establishments worldwide. The Burger King website features the Trade Gothic typeface family for both display and body text, utilizing Trade Gothic Bold, Trade Gothic Bold Condensed #20, and Trade Gothic Light.

One of the most successful implementations of Trade Gothic on the site are the homepage headlines. Set in Trade Gothic Bold Condensed #20, the use of white typography slightly tempers the inherent assertiveness of the font’s letterforms, lending a confident – yet upbeat – air to the matter-of-fact text. The title case subheads set in Trade Gothic Bold provide contrast with the typographic color of the Trade Gothic Light body text, a nice showcase of this family’s versatility (and deliciousness).

Fonts.com Customer Spotlight: Burger King


by Ryan Arruda

Owens Corning is a worldwide manufacturer of building and construction products; known for their iconic pink fiberglass insulation, the company produces a wide gamut of construction products used in both residential and commercial projects.

The Owens Corning website features the Gill Sans typeface family, employing both light, book, and medium weights. The humanistic strokes of Gill Sans projects approachability, while the light weight used in the headline provides touches of clean, architectural modernity and soundness. The multiple weights of Gill Sans in play on the Owens Corning site not only delineates product content, but provides aesthetic stability and balance as well. Owens Corning Website


by Chris Roberts

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

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