CR Blog

Monotype embraces @font-face possibilities

Digital, Graphic Design

Posted by Gavin Lucas, 5 May 2010, 10:02    Permalink    Comments (6)


Above: screen grab from McLaren Mercedes F1 site created by Work Club and Pirata which uses the @font-face css rule to use non system fonts in the site design. Read our blog post about it here

In our March 30th Anniversary issue, we asked a range of prominent figures, including practitioners, critics, curators and academics, to tell us about one thing, person, idea or place that they were excited about for the future... Regular CR contributor and writer of the ever enlightening magculture blog, Jeremy Leslie, chose to nominate and write about @font-face css rule that will allow designers of websites to specify and licence a chosen font to use in a website (rather than relying on the limited selection of standard system fonts) which is then downloaded from the website's server for the end user to see - in the same way that graphics and Flash movies appear on a website.

"Not only does this provide a broader choice of font," wrote Leslie, "but also gives better control of the font, with properties such as letter-spacing – long available to print designers – now specifiable for the web."

Various type foundries have been creating their own technolgies to make their faces available to designers in this way and yesterday type behemoth Monotype Imaging announced the public beta of Font.com Web Fonts – which looks to make a whopping 2,000 fonts available for web designers to try out for free and then licence and use accordingly if they so wish in the building / designing of a website.

We put a few questions to the guys at Monotype to find out a little more about Web Fonts and how it works:

CR: What is Web Fonts?

Monotype: It's a hosted service that, for the first time, enables designers to choose web enabled fonts from the Monotype, Linotype and ITC typeface libraries, in addition to third-party foundries, for website design. Designers can leverage important designs such as the Helvetica typeface, which is exclusive to Monotype Imaging's web collection. When the service launches commercially later this year, additional world-class designs will be available, including the Frutiger  and Univers typefaces, which are  also widely used for brand and corporate identities.

Web Fonts are fonts that are specially formatted for use on the world wide web. Historically, different browsers have varied in their support for web fonts and only consistently supported system fonts which are resident on client machines could be relied upon.  This gave designers no choice but to design using only a handful of fonts.  Also, fonts are licensed by the foundry according to usage. Foundries have not been comfortable with licensing standard TrueType (.ttf) or OpenType (.otf) formatted fonts because there was no protection from piracy in this format. More recently the Embedded OpenType format and now Web Open Font Format offered more security but these formats do not necessarily make it simple to support typography across all browsers. Fonts.com Web Fonts overcomes these inconsistencies for web designers to make it fast and easy to select fonts and add them to a style sheet that will then work across all key browsers.

 

CR: How does it work?

Monotype: To use Fonts.com Web Fonts you just

1. Create a project and assign the domains you want to use the web fonts on,

2. Choose the fonts you want – you can see samples of them first in different sizes, colours etc…

3. Assign the fonts to the appropriate CSS headers in your webpage code

4. Fonts.com Web Fonts generates a string of code to add after your tag

 

CR: Why is this good news for designers?

Monotype: Fonts.com Web Fonts makes it fast and easy to access thousands of fonts used in every day design.

Now designers can take typography used in their print-based designs online for a more consistent brand approach; websites can be differentiated as clearly as print media.

All browsers (including Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome and Opera platforms) are catered for making site design simpler.

When Monotype Imaging's solution launches commercially, fonts will be licensed on a subscription basis so you don’t need to worry about licensing individual fonts. There will also be an entry-level tier that will enable users to enjoy more than 2,000 fonts at no charge. Participants in Monotype Imaging's public beta will be able to use more than 2,000 fonts for free even after the public beta concludes, since these fonts will constitute the free tier. Alternatively, participants may upgrade to a higher level of service when the solution launches commercially later this year.

Websites can become lighter and more effective as fonts can be used for headers instead of graphics improving speed, searchability and accessibility.

Pages can be updated quickly using the service, no need to re-code.

Fonts are secure, and delivered fast over a cloud-based global distribution network with world-class back up.

Designers can try out the 2000 free-tier fonts in prototypes free of charge.

 

CR: How can CR readers find out more / get involved with the beta version?

Monotype: Your readers can view more about the service and sign up to beta test at webfonts.fonts.com. Here at Monotype Imaging, we're keen to receive feedback from beta testers who will continue to receive access to the free service fonts after the launch.

 

6 Comments

Signing up now. I wrote the following article on @font-face back in February, mainly looking at the copyright issues outside of services such as Web Fonts from Font.com... http://bit.ly/dybCi0
Ricky Burgess
2010-05-05 12:33:43


Looks pretty interesting, the interface looks simple and well thought out, but relies 100% on javascript so I wonder what happens to your text if the user has Javascript disabled, or if the font.com webserevrs are down?

Signed up to the beta anyway - will post my findings.
Jonny the Logo Designer
2010-05-05 12:44:13


I'm glad to hear that you get AT LEAST 2000 fonts to choose from. When I first read up on @fontface here, I was worried that we were going to see the same handful of cheesy display fonts everywhere. This sounds very promising though.
Sam
2010-05-05 14:34:40


Sorry, there should have been a link in that last comment on the word "here"

http://line25.com/tutorials/spice-up-your-web-typography-with-font-face
Sam
2010-05-05 15:35:15


Kudos to Monotype. They are following the lead of Typekit http://typekit who has offered a very similar service for 6 months now. Also, for those not interested in a subscription model, hundreds of web-optimized FontFonts have been available for license from FontShop since February http://www.fontshop.com/blog/?cat=80
Stephen Coles
2010-05-05 20:19:35


Latecomer to this blog post but this looks interesting - this one must have passed me by when it was announced. @font-face usage is definitely growing though and becoming a regular feature in our sites. Great to get those distinct SEO friendly H1's styled nicely whilst still being spider-readable and easily integrated to CMS backends without tying clients to creating headings in a graphics package. Took long enough for us to get here though!
Esvelte (Web Designers)
2010-09-01 21:41:22


Tell us what you think

What happens with my feedback?

We no longer require you to register and have a password in order to comment, simply fill in the form below. All comments are moderated so you may experience a short delay before your comment appears. CR encourages comments to be short and to the point. As a general rule, they should not run longer than the original post. Comments should show a courteous regard for the presence of other voices in the discussion. We reserve the right to edit or delete comments that do not adhere to this standard.

Get the RSS Feed
NULL