Monotype embraces @font-face possibilities
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.
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
Signed up to the beta anyway - will post my findings.
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.
Sorry, there should have been a link in that last comment on the word "here"
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
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!
|How a Brazilian street artist and a Leeds design studio created Coke's World Cup identity|
|Fresh Faced + Wild Eyed 2014|
|Designing for The Grand Budapest Hotel|
|The House of Vans opens in London's Old Vic Tunnels|