| Total | 0.00 EUR | |
Typotheque Web Font Service preview 15 Jul 2009
Up until now, if you wanted to use fonts on a website, you were limited to one of the dozen or so ‘web-safe’ fonts. Using other fonts required you to convert the text into images, or to use some hacky Javascript or Flash solution such as sIFR or Cufón.
In a relatively recent development, browsers which support the @font-face rule can access fonts embedded in websites, but most font companies have been reluctant to permit use of their products on the web because of the high risk of software piracy. Typotheque, however, is working on a web font-embedding system which is based on W3C standards and provides a secure, reliable way to use fonts whose files are hosted on a global network of servers (cloud hosting).
How will it work?
Owners of Typotheque font licenses can create embeddable fonts via their Typotheque accounts. Simply enter the URL(s) where the font will be used and the languages to be supported, and our system instantly generates a short block of CSS code. Paste the code into your website, and you are ready to start using the font. You will not work with actual font files, but with the CSS code linking to the font files. For most browsers TTF subsets are used, for Internet Explorer, fonts are converted to EOT format on the fly.
Font Subsetting
Regular Typotheque fonts support over 100 languages and advanced typographic features such as small caps, different numeral styles, alternative characters and special symbols. Web browsers, however, can access only a small fraction of those characters. Removing these inaccessible features makes the files much smaller, so they download much quicker. Users can specify which languages to support.
Sample
On the sample below we use Fedra Serif Multiscript, a font with over 2,500 glyphs. The original font file is 1,062kB. For the purpose of this sample, it has been shrunk to 234kB, while still supporting French, Polish, Greek, Russian and Arabic. All other unnecessary glyphs, and OpenType features were removed. The other font on the page (Fedra Sans Pro Bold) is normally 510 kB, and now reduced to 38kB.
Supported browsers
The @font-face rule is supported by Firefox 3.5, Safari 3.1, Opera 10, Chrome 2.0 and Internet Explorer 4.0 and later. Our system is thus compatible with more than 94% of all browsers in use. For older browsers you can define a list of default web-safe font stacks. See also this article: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers.
Known issues:
While Latin-based, Cyrillic and Greek work consistently across all supported browsers, there is inconsistent support for TTF/OTF. Languages such as Arabic require advanced text shaping. Different platforms and browsers support different rendering technologies to enable text shaping. Safari on Mac renders OTF/TTF fonts correctly (see this image), Firefox and Opera under Mac OS X require AAT fonts. On Windows and Linux, OTF/TTF fonts will render correctly.
Typotheque Web Font Service is coming later this summer. Follow us on Twitter, or subscribe to our RSS feed.
18 comments
Richard Fink, 8 Sep 2009
Peter,
>We might change the idea when .WebOTF or other web only font will pick up.
This may be sooner rather than later and it won't be .webOTF (now named WOFF) that drives it.
There is a better than strong chance that a soon-to-be-renamed "EOT Lite" will be supported first, by Firefox, and next, by the second-tier browsers.
I just did a blog post to bring people up to date about this and other developments at Readable Web.
I've included links to a few of your pages in the post.
What does one need to do to get a test account during your Beta period?
Cheers, Rich
>We might change the idea when .WebOTF or other web only font will pick up.
This may be sooner rather than later and it won't be .webOTF (now named WOFF) that drives it.
There is a better than strong chance that a soon-to-be-renamed "EOT Lite" will be supported first, by Firefox, and next, by the second-tier browsers.
I just did a blog post to bring people up to date about this and other developments at Readable Web.
I've included links to a few of your pages in the post.
What does one need to do to get a test account during your Beta period?
Cheers, Rich
Peter Bilak, 7 Sep 2009
Hi Richard, we'll be using the fonts through our web font system. We don't really see much benefit selling EOT fonts separately, as it will work on Explorer only.
The idea is to offer a simple usable system that works in most browsers and by serving EOT for Explorer and TTF subsets for other browsers we cover 95% of current browsers.
We might change the idea when .WebOTF or other web only font will pick up.
The idea is to offer a simple usable system that works in most browsers and by serving EOT for Explorer and TTF subsets for other browsers we cover 95% of current browsers.
We might change the idea when .WebOTF or other web only font will pick up.
Richard Fink, 7 Sep 2009
Will you be licensing your fonts, as Ascender and others now do, for web use or will they be available for that purpose only through your web service?
Peter Bilak, 11 Aug 2009
Firefox simply requires Access Control Headers to load the font from a different domain. So we provide them to make sure the fonts load properly.
Ricardo, 11 Aug 2009
I thought Firefox had a same domain policy on font-face?
ProfessorGuy, 4 Aug 2009
Excellent. The trend of making an image out of text is extremely annoying to us low-bandwidth users. However, the user can turn off images and rely on the alt text. Will there be a similar user control to prevent font downloading so as to rely on a default font?
Peter Bilak, 4 Aug 2009
@ ProfessorGuy, The example of a 234k font is because it needs to support Latin, Greek, Cyrillic and Arabic. It is highly unlikely that this will be a typical use. If you use fonts to support English mainly, you will end up with a file of 20k. That might be less than rasterising an image of text and loading it to pages. This can in fact speed up pages.
ProfessorGuy, 4 Aug 2009
Great! Another 234k added to the page size. That's 97 seconds extra at my location. Put this on your website and lose me as a customer.
Oh, I'm on a too slow line to do much anyway? Yes, but I do some. And if your page is too slow, you don't get my business. Go ahead, keep adding crap to your pages. I love how most sites no longer work for me. Keep up the forward progress!
Oh, I'm on a too slow line to do much anyway? Yes, but I do some. And if your page is too slow, you don't get my business. Go ahead, keep adding crap to your pages. I love how most sites no longer work for me. Keep up the forward progress!
Paul D. Hunt, 3 Aug 2009
thanks for clearing up my confusion, Peter. I hadn't stopped to think of EOT as belonging under the @font-face umbrella.
Peter Bilak, 2 Aug 2009
Very good point. The web-safe fonts that we currently use, are indeed optimised for the use on screen, and they will be hardly matched by print fonts.
Right now we work on delivery technology for web fonts, but soon we will offer also special versions for optimal screen rendering. Not all Typotheque fonts will comes as screen-optimized, but we will surely have a Serif, Sans, and Mono fonts that read fine on screen even in small sizes.
Right now we work on delivery technology for web fonts, but soon we will offer also special versions for optimal screen rendering. Not all Typotheque fonts will comes as screen-optimized, but we will surely have a Serif, Sans, and Mono fonts that read fine on screen even in small sizes.
Paul Hughes, 2 Aug 2009
This is all very good, but I hope people realise that not all fonts are made to be read in screen. When you use some pretty print font in 11px, it will be deformed beyond recognition, especially in Windows.
Matthieu Blanchard, 30 Jul 2009
This is excellent news, it made my day. Thank you!
Peter Bilak, 29 Jul 2009
Andy Clarke reviewed our system in detail here: http://forabeautifulweb.com/blog/about/testing_typotheque_font-face_embedding/
Peter Bilak, 29 Jul 2009
Hey Paul, early beta version of Chrome supported @font-face, but mysteriously the functionality disappeared in the latest version. I have not taken screenshots, but Ralf Herrmann did (http://bit.ly/VJHTF).
In Explorer it should work. We generate EOT fonts for IE.
Opera 10 (beta) supports @font-face.
In Explorer it should work. We generate EOT fonts for IE.
Opera 10 (beta) supports @font-face.
Paul D. Hunt, 29 Jul 2009
are you sure about support for @font-face in Chrome 2.0 and Internet Explorer? I have found no options to enable this functionality in either of these programs. On Windows, I can only get @font-face rules to work in Firefox (3.5.1), and Safari (4.0.2), I have not tested Opera, but I'm assuming that @font-face rules are applied there.
Peter Bilak, 29 Jul 2009
There is plenty of differences between other font embedding solutions and ours. The main one is that it supports fully our fonts, so it is a multilingual solution (working with Latin, Greek, Cyrillic, Hindi, Arabic, etc). It supports also advanced typography, Small Caps, various styles of numerals.
Because we are type designers, and license fonts directly, we can provide one single license which allows use in print and on the web. No need to buy two separate licenses, as it is the case with other web font solutions.
Because we are type designers, and license fonts directly, we can provide one single license which allows use in print and on the web. No need to buy two separate licenses, as it is the case with other web font solutions.
Mark Grass, 24 Jul 2009
This sounds fantastic. Is there something to show already? How will it be different from Typekit?
Emily Gordon, 20 Jul 2009
Wonderful news!
