fonts.com blog
Posts Tagged ‘fonts’

by Ryan Arruda

Here’s a listing of the top 100 most used fonts from the Fonts.com Web Fonts service for November 2013:

Avenir Next
Neue Helvetica
Gill Sans
Trade Gothic
Avenir
Univers
Proxima Nova
Futura
Gill Sans Infant
Frutiger
Helvetica
ITC Franklin Gothic
Rockwell
Linotype Univers
Classical Garamond
Sabon Next
DIN Next
Klint
Century Gothic
Museo Sans
Courier PS
Bree
Chaparral
Myriad
VAG Rounded
ITC Avant Garde Gothic
ITC Caslon No. 224
Eurostile LT
Univers Next
Museo Slab
Neo Sans
Arial
ITC Legacy Serif
Harmonia Sans
ITC Century
Amasis
ITC Lubalin Graph
Neue Helvetica eText
Motoya Birch
Optima
ITC Legacy Square Serif
Slate
Praxis
Neue Frutiger
Trade Gothic Next
Diverda Serif
Swiss 721
Clarendon
Azbuka
ITC Officina Serif
Frutiger Next
Delima
Amadeo
ITC Bodoni Six
Brandon Grotesque
Soho Gothic
Calibri
ITC Charter
ITC Officina Sans
Linotype Didot
ITC Conduit
Helvetica World
Bodoni LT
Chocolate
Adobe Garamond
Lexia
Egyptienne F
ITC American Typewriter Hellenic
Bookman Old Style
Soho
Comic Strip
Swift
ITC American Typewriter
ITC Fenice
Glypha
Droid Sans Mono
Rotis Sans Serif
PMN Caecilia
Auriol
Zapf Humanist 601
Bembo
Monotype News Gothic
Alternate Gothic
ITC Stone Informal
Neue Helvetica Arabic
Francker
VAG Rundschrift
Linotype Sketch
Sackers Gothic
Trade Gothic Next Soft Rounded
Humanist 777
ITC Eras
C Hei 2 PRC
Droid Serif
M Elle PRC
C Hei PRC
M Lady PRC
M Stiff Hei PRC
Monotype Goudy
Caslon Classico

 


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 Dr Hermann Püterschein

Bill Dwiggins got me hooked on type. His marionette shows were what attracted me to his studio, but it was his passion for calligraphy, type and typography that lured me into a life of letters. Serious stuff, but I was a pretty serious kid back then. I guess that’s how I got my “Doctor” nickname. Bill also gave me my start in the type business – but that was much later.

Toshi Omagari’s re-envisiong of Dwiggins’ original Metro

Toshi Omagari’s re-envisiong of Dwiggins’ original Metro

I believe that the Electra typeface was the first of Bill’s that I wrote about. (I wasn’t around when he drew the Metro design back in 1930.) But I did write a review of Metro Office when Linotype released the small family for, well, office use, in 2006. If memory serves, I gave it a “36 point” rating (“worth the ticket price”).

When Monotype invited me to have a preview look at Toshi Omagari’s re-envisioning of Bill’s original Metro, I jumped at the chance. The new design, Metro Nova, is quite a nice piece of work. Bill’s Metro had to make do with just four weights – and only three of them had italic complements. Omagari’s design offers a full range of seven weights of roman designs – each with an italic companion – plus six weights of condensed designs with italic counterparts as well. Now that’s an excellent enhancement.

Seven weights with italic counterparts, and six condensed weights—also with italic counterparts.

Seven weights with italic counterparts, and six condensed weights—also with italic counterparts.

Omagari also made improvements to some of the original Metro’s character designs. Not that Bill wasn’t a good designer – he was, but he had to put up with Linotype’s antiquated unit system and the firm’s insistence that every typeface family under the sun duplex – you know, share common character width values. Bill worked around these mechanical restrictions pretty well, but Omagari’s design is digital. And what a dramatic difference that makes! You won’t find any compromises in proportions or spacing in Omagari’s Metro Nova.

The new design is also available as OpenType Pro fonts, allowing for automatic insertion of ligatures and those alternate characters Bill drew for his original design. Pro fonts also have extended character sets to support most Central European and many Eastern European languages. Omagari even added the alternate Icelandic ð to the character suite! (He has friends in Iceland.)

Metro Nova Pro alternate accented Latin characters; alternate umlaud, accent “a” and Icelandic “eth” characters

Metro Nova Pro alternate accented Latin characters; alternate umlaud, accent “a” and Icelandic “eth” characters

While it’s not the second coming of Garamond, I really like the new Metro Nova. Omagari has done a terrific job of building on Bill’s original design. Metro Nova is a rock solid typeface family that’s not going to gather dust on anyone’s hard drive.

Click here to learn more about – and to license – the Metro Nova family.

Alternate and Standard setting of capital M

Alternate and Standard setting of capital M

 

Dr. Hermann Püterschein is President of the Society of Calligraphers and a noted typeface & typographic critic. He can be reached at HermannPuterschein@gmail.com

 


by Darren Glenister

Fonts.com Subscription Extension

The recent integration of our SkyFonts technology into our Fonts.com Web Fonts subscription plans introduced some major new benefits. These included the ability to try fonts before buying them, and the ability to use fonts included with your subscription for website mockup use and even final design use. Now we’re excited to bring you two new tools that make SkyFonts even easier to use. And of course, there’s no additional charge for either of them, since they’re automatically part of all Fonts.com Web Fonts subscriptions, even our free plan. Don’t have a plan yet? Sign up now for free.

Try, install and sync fonts from favorite Adobe design applications

We have an all-new Fonts.com subscription extension for industry-standard design applications including Photoshop, Illustrator, and InDesign. Whether you’re using Adobe Creative Cloud or Creative Suite, you can try, install, and sync desktop fonts from your Fonts.com subscription directly through your favorite design applications.

Fonts.com Subscription Extension

All the functionality of the SkyFonts client for activating fonts is built right into the extension. An unobtrusive window within your application allows you to search for and activate fonts right in your document. Free plan subscribers can use the extension to initiate five minute trials of fonts while higher level subscribers can use the extension to install mockup fonts and desktop fonts included with their plans.

A boon for efficiency, any fonts you trial or activate will automatically be pushed to your authorized machines through SkyFonts. Don’t have SkyFonts installed on one of your devices? Click here to download it at no cost. With our new extension you’re able to focus on your project details instead of managing or installing fonts. Whether choosing type, prototyping designs, or executing production work for digital or print projects, this extension allows you to take full advantage of your Fonts.com subscription benefits with ease.

Download the Fonts.com Subscription Adobe Extension for free.

Easily Browse & Activate Fonts Directly on Your iPad 

Need to make type choices when you’re away from the office, or don’t have access to your primary workstation? Or just want to browse fonts for fun?

We’re also excited to announce the Fonts.com subscription iPad app. With an intuitive touch interface, you can select, compare and activate fonts directly from your iPad. The app will be available for download shortly. In the meantime, you can try it out in your browser.

Fonts.com Subscription iPad App

Filter designs by visual traits such as weight, width and x-height, or browse typefaces by individual foundry. Use the mix feature to easily compare up to three different typefaces at a time, giving you a great way to gauge and establish a visual hierarchy for your project — pick your headline, subhead and body text type system in one simple step.

Find a design you like? Add it to your list of favorites with a touch of a button — a convenient way to save fonts for future projects or to collect type options to present to clients and colleagues. Or already know which designs you’d like to use? You can activate trials, mockup and desktop fonts directly from your iPad — even selections made on the go are automatically synced to all your authorized machines via SkyFonts.

With our new Fonts.com subscription Adobe extension and iPad app, you can now access type in whatever application you are in — be it Photoshop, Illustrator, or InDesign, and from wherever you are — in the office or on the go.

Get them both for free!

Ryan ArrudaRyan Arruda is the Web Content Strategist at Monotype Imaging. Ryan holds a bachelor’s degree in film studies from Clark University, and an MFA in graphic design from RISD.

by Dr Hermann Püterschein

I first met Bill Dwiggins when I was quite young. I grew up in Hingham, Mass., and was one of the neighborhood kids who attended his marionette shows. Later on, I started dropping by Bill’s studio every now and again to watch him carve the marionettes.

First Showing of Metro

Today is Bill’s birthday. If he were still around, he’d be 133 years old. Bill was always a bit of a kid about his birthday. It was a special day for him. So, Monotype invited me to write this post for two reasons: to toast Bill’s birthday and to share the news that they are almost finished working on a revival of one of Bill’s most important typeface designs.

Monotype’s suggestion that I write a note honoring my friend falls happily with my mood. Moreover, It also gives me the opportunity to clear up a point about his association with me. From time to time, it’s been implied that Bill and I were the same person. This is complete nonsense and was disproved some time ago. Bill and I submitted our individual thumbprints to a prominent Boston typographer for scrutiny. When enlarged, one could clearly see that the whorls of my thumbprint were composed of Fraktur letters, while those of Bill’s were fleurons joined in an engaging pattern.

Metro Nova

Bill drew a raft of typefaces during his years as a freelance designer for Linotype. A goodly number of them have been pressed into service as popular digital fonts. The one that most deserves a makeover, however, is Bill’s first: the Metro typeface. Not that it wasn’t a good design. It was indeed, but it’s always been a small family, and Bill was hamstrung by Linotype’s penchant for duplexed fonts. (This is where a pair of styles – such as roman and italic – were cut within the same mold for use in the printing process.) This meant that all characters were required to have the same width. I certainly anticipate that Monotype’s designer for the revival project will have resolved these limitations.

Metro Nova

Something I hope Monotype doesn’t eliminate is the profusion of alternate characters Bill drew. Bill liked to have fun with his work, and his playfulness was apparent in several characters of the original Metro design. The cap Q and lowercase g and e come to mind – but I know there were more. They were pretty lively, and didn’t look like anything you might find in the Futura or Erbar families, which were designed around the same time.

It seems that some pompous printers back in the 1930s didn’t like this aspect of Bill’s design. These were hard-pressed folks who persuaded Linotype to replace the characters in question with ones that were about as stuffy as these people were. After that, you could only get the original characters by special order.

Well, Happy Birthday to Bill – and the best of luck to Monotype. I’m looking forward to seeing that new design.

Click here to learn more about the new Metro family.

 

Dr. Hermann Püterschein is President of the Society of Calligraphers and a noted typeface & typographic critic. He can be reached at HermannPuterschein@gmail.com

 

 

 

 

 

 


by Ryan Arruda

CustomerSpotlight_SasquatchFestival

Occurring over four days at the end of May, the Sasquatch! Music Festival features an eclectic lineup of musicians performing at the Gorge Amphitheater in Quincy, Wash.

The festival’s site is a typographic delight. Utilizing colossal headlines and navigation elements all in the affable ultra weight of the ITC Kabel family, the site is reminiscent of 19th century broadsides — large, type driven, and visually arresting.

Despite the presentation being set almost exclusively in not only the same typeface, but the same weight of that selection, the use of scale as well as the muted, earthy color palette provides an engaging and navigable hierarchy.

In a slight divergence, the site’s body copy is set in the Futura family’s book weight. While certainly an aesthetic cousin of the ITC Kabel designs, Futura is decidedly more austere, making it apt for longer passages of text where former’s visually boisterous character would be to the detriment of the reader. The pairing works especially well given the contrast in the weights employed.

The ITC Kabel family is available in five weights, from the reserved book style to the hulking (yet charismatic) ultra weight. The Futura family is available in an expansive 20 styles, with weights from light to extra bold, including companion condensed widths as well. Both typeface families are available for desktop licensing, as well as online use through subscriptions to the Fonts.com Web Fonts service.

Ryan ArrudaRyan Arruda is the Web Content Strategist at Monotype Imaging. Ryan holds a bachelor’s degree in film studies from Clark University, and an MFA in graphic design from RISD.

by Alan Tam

I’m pleased to announce a collection of typefaces specifically crafted for high-quality e-reading experiences, particularly for content displayed at smaller text sizes.

Intended for Web and digital content publishers and device manufacturers, the suite offers some of the most widely used typefaces traditionally used for print that have been designed and tuned for ease of readability and optimized performance on the Web and across devices. Classics like the Monotype Baskerville, ITC Galliard and Sabon designs were redrawn to improve their readability in various screen environments.

Our typeface designers worked to impart a richer contrast, an even color and slightly taller lowercase characters, all while ensuring that the typefaces appear as unmistakable cousins of their original print designs. The designs also include small caps and old style figures for professional-quality publishing design. These typefaces are available now through our Fonts.com Web Fonts subscribers for use on the Web.

eText Fonts

All typefaces in the collection have also been hand-hinted to display as clearly as possible across mobile devices from smartphones to tablets and e-readers. For device manufacturers, these fonts also take advantage of Monotype’s Edge™ tuning technology, enabling publishers to create and deliver high-quality, readable text across your device platforms and formats, including E Ink screens. The fonts look and perform best with devices that use Monotype’s iType font engine.

We intend to release more  fonts on an ongoing basis as part of our Monotype Portfolio for Digital Publishing, one of our value-added suites of typefaces and technologies designed to meet the requirements of customers in specific market segments. Our Monotype Portfolio for Digital Publishing addresses the needs of customers who are developing and delivering content for immersive reading on e-readers, tablets and other devices.

Our initial offering includes these popular designs:

Amasis eText (4 weights)

ITC Galliard eText  (4 weights)

Malabar eText (4 weights)

Monotype Baskerville eText (4 weights)

Neue Helvetica eText (4 weights)

Palatino eText (4 weights)

PMN Caecilia eText (4 weights)

Sabon eText (4 weights)

Ysobel eText (4 weights)

You can view the eText fonts here.

The Monotype eText typefaces can be licensed as Web fonts through our Fonts.com Web Fonts subscriptions. They are also ideal choices for e-book/publication titles, desktop publishing or as system fonts that are embedded in consumer electronics devices. Please contact Monotype for licensing details.

 


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

Last week we announced the availability of a technology that allows Web designers to use OpenType features more easily and reliably. The technology which is incorporated into our Fonts.com Web Fonts service ensures that OpenType features such as ligatures, fractions and alternate characters are rendered, even when a visitor’s browser does not inherently support OpenType features.

If you’re new to OpenType features, have a look at this demo page . Simple on / off buttons allow you to preview text with and without the use of OpenType features, helping to illustrate the impact they can make.

We’re charting new territory with this capability. As such, we consider this an experimental feature and hope that you can provide us with your feedback to help us evolve it.

When you’re working on your project, the OpenType Feature control appears on the Add & Edit Fonts utility if your project contains a font with OpenType features. If you’ve had a chance to try it out, you’ll now notice that the tools introduced last week have been placed on a basic tab. Here you can activate OpenType features for a particular CSS selector. The first of our enhancements to the technology can be found on an advanced tab. This tab can be used to specify which portions of your text you want to apply OpenType features to, instead of turning them on or off for all text associated with a particular CSS selector. The advanced tab also features a simple online text editor to streamline the creation of Web content using these features.

The editor works inside the browser so you do not have to install anything. It shows what the text will look like as it is being edited, and it helps you see what features are available in the selected font and what features are available in the selected text.

This example shows the Fonts.com Web Fonts OpenType Feature control and illustrates use of ligatures and fractions. The code below was output from the text editor while creating the example shown below. This code may be a handy starting point when building your CSS or HTML, or when using OpenType features for targeted blocks of texts.

We’ve also been hard at work releasing more OpenType fonts for you to use. You can now refine Web font search results to display just those containing OpenType features as shown below. We’ve also provided a list of great choices here to help you get you started using OpenType features on the Web.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://fast.fonts.com/jsapi/74c1c08e-9c2a-4701-8328-4748e42bc503.js"></script>

<style>
.class-with-otf-main {
font-family: Ayita W03 Black; line-height: 01.5em;text-align:left;
}

.class-with-otf-0 {
font-size: 03.0em;
color: rgb(0, 0, 0);
text-decoration: none;
–moz-font-feature-settings : ‘dlig= 1′,‘calt=0′;
–moz-font-feature-settings : “dlig” 1,“calt” 0;
–webkit-font-feature-settings : “dlig” 1,“calt” 0;
–ms-font-feature-settings : ‘dlig= 1′,‘calt=0′;
–o-font-feature-settings : “dlig” 1,“calt” 0;
font-feature-settings : “dlig” 1,“calt” 0;
}

.class-with-otf-1 {
font-size: 03.0em;
color: rgb(0, 0, 0);
text-decoration: none;
}

.class-with-otf-2 {
font-size: 03.0em;
color: rgb(0, 0, 0);
text-decoration: none;
–moz-font-feature-settings : ‘liga= 1′,‘calt=0′;
–moz-font-feature-settings : “liga” 1,“calt” 0;
–webkit-font-feature-settings : “liga” 1,“calt” 0;
–ms-font-feature-settings : ‘liga= 1′,‘calt=0′;
–o-font-feature-settings : “liga” 1,“calt” 0;
font-feature-settings : “liga” 1,“calt” 0;
}

.class-with-otf-3 {
font-size: 03.0em;
color: rgb(0, 0, 0);
text-decoration: none;
}

.class-with-otf-4 {
font-size: 03.0em;
color: rgb(0, 0, 0);
text-decoration: none;
–moz-font-feature-settings : ‘frac= 1′,‘calt=0′;
–moz-font-feature-settings : “frac” 1,“calt” 0;
–webkit-font-feature-settings : “frac” 1,“calt” 0;
–ms-font-feature-settings : ‘frac= 1′,‘calt=0′;
–o-font-feature-settings : “frac” 1,“calt” 0;
font-feature-settings : “frac” 1,“calt” 0;
}

.class-with-otf-5 {
font-size: 03.0em;
color: rgb(0, 0, 0);
text-decoration: none;
}

</style>
</head>
<body>
<div><span>st</span><span>acks of wa</span><span>ffl</span><span>es</span><span>1/2</span><span>off</span></div>
</body>
</html>

 


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!

Great type makes sites stand out