Webfont Service

How do I use the Small Caps?

Because web browsers do not support OpenType layout features, we built a system that generates font files on the fly and can apply OpenType features directly to the file. This enables us to support true small caps as well as various styles of numerals. You can control these advanced OpenType features via your online account.

This means that selecting the checkbox Small Caps will replace the standard lower case letters with true small capitals. You can turn the small caps on and off at any time, while keeping the same CSS code.

If you would like to combine Small Caps and regular lower case, you will need to create two separate webfont projects.

How does it work?

Owners of Typotheque font licences can create embeddable fonts via their Typotheque accounts. Simply enter the domains 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, just with the CSS code linking to the font files.

How is it different from sIFR or Cufón?

sIFR is a workaround which uses Javascript, Flash and CSS to replace the given text with small Flash files. The lengthy processing times involved make it unsuitable for longer texts. Cufón, on the other hand is a Javascript package that draws type outlines. Like sIFR, it runs rather slowly, is difficult to set up, and has some issues with text selection and screen rendering.

Our system uses real fonts exactly like the other fonts that your computer uses to display websites. The only difference is that the font files are not hosted on your computer, but on a secure server.

What’s this all about?

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 (Verdana, Times, Helvetica—you know, the ones you see everywhere on the web). 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, now offers the Typotheque Web Font Service, a font-embedding system which is based on W3C standards, providing a secure, reliable way to use fonts whose files are hosted on a global network of servers (cloud hosting).

How do I use the CSS code?

We wrote a simple tutorial on how to implement the CSS code generated by the Web Font Service.

Can I embed any font in my website?

Fonts are software, and their use is defined by their End-User Licence Agreement. At the moment, most commercial fonts don’t permit font embedding, but all Typotheque fonts can be embedded via our secure server.

Does your system work in all browsers?

The @font-face rule is supported by Firefox 3.5, Safari 3.1, Opera 10, Chrome 5 and Internet Explorer 4.0. Our system is thus compatible with more than 98% of all browsers in use. For older browsers you can define a list of default web-safe font stacks.

For more information see the Wikipedia article on browser usage statistics.

Can I place the fonts on my server?

Our Web Font Service Licence doesn’t cover placing the font files on your own server. Use Typotheque’s font-embedding method instead. It automatically generates a block of CSS code that you can use on your site.

Typotheque also offers a separate Server Licence, which is designed for large companies and is priced at €1500 per font. For more information please get in touch.

How do I embed a font for viewing in Internet Explorer?

Typotheque’s font embedding system works with any browser supporting the @font-face rule, so you don’t have to worry about the technical differences between Explorer and other browsers. For the curious and the technically-minded: Internet Explorer supports embedding of EOT (Embedded OpenType) fonts, whereas other browsers use standard TrueType (TTF) and OpenType (OTF) fonts. Typotheque’s system, however, creates both TTF and EOT fonts on the fly, so the CSS code it generates works correctly in all compliant browsers.

Where are the embedded fonts hosted?

We use a global network of geographically distributed servers (cloud hosting), so you can be confident that the font files will be available at all times. Specifically, we use Amazon Web Services (AWS), a backbone infrastructure that guarantees the highest possible uptime. The hosting is scalable and can adapt to any kind of application, no matter how fast it grows or how big it gets.

Furthermore, hosting font files on external servers makes loading faster, as font files are subject to the same connections-per-hostname limits as other resources. Loading them from the same server might block other downloads. Using reliable external hosting delivers faster download times by avoiding the blocking issue.

How are the fonts secured?

Instead of providing a font file directly to clients, we provide a block of dynamically-generated CSS code for use on the client’s site. The actual font file is hosted on our secure servers, and its URL is not visible to the end user. Furthermore, the fonts are subsetted, using only the characters required by the specific website, which makes downloading of the fonts very fast. And since about 95% of the font information is removed, even if the file is pirated it only contains 5% of the font software.

Additionally, specific font tables that are required for normal use of the fonts are removed, which makes the webfonts unusable in standard computer applications. Finally, all fonts carry a digital watermark which enables tracing of unauthorised users.

What is 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.

What is @font-face?

The @font-face rule is a W3C standard allowing authors to specify online fonts for displaying text on their webpages.

Example:
  @font-face {
    font-family: "Example Font";
    src: url("http://www.example.com/fonts/example");
}
  h1 {
    font-family: "Example Font", sans-serif;
}

For more information see the W3C article on the @font-face rule.

Is this a one-time fee, or a subscription model?

You pay a one-time fee for the font licence. If you stay within the allocated bandwidth limit (500MB per font per month), there will be no further costs for you. Additional bandwidth costs €0.001 per megabyte, per month.

Do webfonts support OpenType features?

Unfortunately, web browsers do not support OpenType layout features (yet). But the Typotheque webfont system generates font files on the fly, and can apply OpenType features directly to the file in the process. This enables us to support true small caps as well as various styles of numerals. You can control these advanced OpenType features via your online account.

Don’t use the font-variant:small-caps; property in CSS, as this scales the characters mathematically, rather than using true small caps.

Do webfonts support languages such as Russian or Arabic?

Typotheque webfonts support all languages supported by their print versions. That’s over 200 languages, including those using Cyrillic, Greek and Arabic scripts.

Latin, Greek, Armenian and Cyrillic scripts render consistently in all browsers, but complex scripts such as Arabic or Devanagari require AAT fonts for correct shaping on Macintosh. That means that Windows renders the fonts correctly, but Mac renders in the fallback font (rather than showing unshaped glyphs). We hope that Apple will extend their support for OTF and TTF fonts to render complex scripts correctly.

How much does it cost?

If you have already purchased an OpenType font licence from us, you can use the licensed fonts on the web via our font embedding system. It also entitles you to 500MB of free bandwidth per month. Additional bandwidth costs €0.001 per megabyte.

How much does bandwidth cost?

To ensure optimal file availability we use a global network of distributed servers. We allocate 500MB of free bandwidth per month per used font. For a typical font file size (approximately 20kB), that translates to 25,000 visitor views per month. Additional bandwidth costs €0.001 per megabyte. Users can monitor usage statistics, so they can know in advance how much they will be billed.

How do I use webfonts on HTTPS websites (SSL certificate)?

You can serve the webfonts also to secure websites using SSL certificates with https domain prefix. Log in to the Typotheque online account and go to the Webfonts section. There you can click the checkbox ‘Enable HTTPS’, which generates a different URL path for the CSS file. Please note that using HTTPS is a little slower than the normal webfonts serving method, so use if only when needed.

Does it work when JavaScript is disabled in browsers?

Yes.

Can I use the fonts I licensed both in print and on the web?

The Print & Web Licence of our OpenType fonts permits you to download the font files and use them in your favourite print applications. When you want to use them on a website, log in to your account to generate a block of CSS code for your webpage.

If I buy a Web Licence, can I upgrade to a Print & Web Licence later?

Yes you can. Just log in to your account, open your order history, click My Fonts and then the Upgrade button.

I bought a font licence from you many years ago. Can I use the webfonts for free?

For technical reasons, PostScript fonts can’t be used to create web-embeddable fonts, so if you licensed PostScript versions of our fonts, you will first need to upgrade to OpenType versions.

If you already have OpenType versions you can now use them on the web at no extra cost. Just login to your account, and click on Webfonts.

I also sell fonts. Can I use the Typotheque system to embed my own fonts?

We created an API so that other font vendors can also sell webfont licenses using our system. More information will be available via: www.type-applications.com. Please get in touch to discuss the possibilities.

I am concerned about the reliability and speed of hosting fonts on third-party servers. How does it work?

Typotheque hosts fonts on a global content delivery network using Amazon.com’s redundant server architecture. This makes Typotheque webfont hosting faster and more reliable than most of our clients’ own websites.

Because browsers have limits on how many simultaneous requests they can make to individual servers, hosting images or fonts on third-party servers will utilise more connections, loading files much faster than if they were hosted on the same server.

My client doesn’t accept having their fonts installed on external servers. What to do?

While the licence of the Typotheque Web Font Service doesn’t cover the installation of fonts on external servers, we do offer a special Server Licence which allows installation of fonts on web servers. The fonts must be installed following special instructions. This licence is priced at €1500 per font. For more information please get in touch.

Can I try the fonts before buying a licence?

Yes, in addition to Print & Web and Web licenses, we also offer a Web Trial Licence, which gives you a bandwidth limit of 50MB and 30 days to evaluate the fonts. After 30 days or 50 MB (whichever comes first), you will be prompted to upgrade to a Web or Print & Web License. If not upgraded, the licensed fonts will expire.

The Web Trial Licence is also limited to a single language font subset and two domains.

How many domains do you allow the font to be displayed on per licence?

There is no limit on the number of specified domains.

Can I update the list of domains after purchase?

Yes, you can update the list, adding or removing domains at any time. There is no limit on the number of domains.

I am a web designer who used the fonts for a client’s site, but would now like to transfer the web project and all future charges to the client. Is that possible?

Yes, it is possible. Please contact us directly when you are ready to do so. Both users will have to have a Typotheque account and agree to the terms of the licence.

Can I set my own monthly budget for the bandwidth?

Yes, you can. To set a monthly bandwidth budget, log in to your account, go to Webfonts, and click on Stats. After the monthly limit is reached, the next font specified in the font stack will be used until the end of the month. From the 1st of the next month, the first font will be used again until you reach the limit, or raise the budget limit. You will receive an email notification when the limit is reached.

What happens to the website if I stop paying monthly bandwidth charges?

If you have defined a font stack, the next typeface in the stack will be displayed.

Can I also use my locally installed fonts for test purposes?

Yes you can. Our CSS is designed to recognise local fonts, and if the given font is installed locally it is used first. In that case the webfonts are not used, so no bandwidth is consumed.

When you use locally installed fonts, you will not be able to control OpenType features such as small caps or numeral styles.

Firefox briefly displays another font before it loads the font I selected. Why does this happen?

In some browsers, most notably Firefox, you may see a barely noticeable ‘blink’ (a.k.a. Flash Of Unstyled Content) before the real font loads in. This is a result of Firefox’s handling of the @font-face rule.

As a workaround we offer a JavaScript solution that hides content until browsers are finishing loading fonts.

Why don’t the fonts look the same in Windows and in Mac OS?

Font rendering is handled by the operating system’s rasterizer. While Apple’s OS X does a great job of rendering all fine details of type on screen, the Windows rasterizer is less refined, so fonts in small sizes don’t look as good as in Mac OS.

You can enhance font display on LCD screens by turning on Windows ClearType. You can further fine-tune ClearType by using the ClearType Tuner.

Follow these steps to enhance screen fonts on Windows:
How to Use ClearType to Enhance Screen Fonts in Windows XP
ClearType Tuner
ClearType Tuner PowerToy

Can I see some samples of your fonts in use?

Sure. Below are links to pages that we made.

http://www.typotheque.com/webfonts/sample
http://www.typotheque.com/webfonts/sample_2
http://www.typotheque.com/webfonts/sample_3
http://www.typotheque.com/webfonts/multilingual_sample

And here are some of our clients using their fonts online.

Selection of websites using Typotheque fonts

If you have implemented Typotheque fonts on your site, please let us know and we'll consider including a link here.

Fonts on iPhone and iPad

Since the version of Apple iOS 4.2, Mobile Safari in the iPhone and iPad support real fonts in TrueType and OpenType format. The previous version of iOS had to use SVG fonts when using @font-face feature.

Typotheque webfont system supports both SVG and TrueType fonts, to guarantee consistent rendering of webpages in mobile devices, so webfonts will show just fine on your iPad and iPhone regardless of which version of the iOS you use.

What are the Print & Web License and the Web Licence?

We now offer two different font licences. The Print & Web Licence (formerly the Basic Licence) entitles you to download the font files to your computer and use them in print applications as well as on the web. If you only need to use the fonts on the web you can save 80% by buying the Web Licence, which gives you access to the online CSS code generator rather than to actual font files.

Do you allow self-hosting of webfonts?

Yes, we do.

While in most cases we recommend using Typotheque webfont service, some clients require self-hosting of font files on web servers, which we allow provided the fonts are installed following special instructions. You will need to acquire a Server Licence.

Font Subsetting

To make the webfont files as small as possible, we remove some inaccessible glyphs, and users can specify languages to support. Licensed fonts can use as many as 5 languages, trial licences work with a single language. You can also specify custom sets, and preview the glyph set directly. Besides the letters needed to render the specific languages, we add following glyphs automatically to every language: !"#$%&'()*+,-./0123456789:;<=>?@[\]_{|}†¢£§•®©™¥¿¡–—“”‘’¤‹›‰€«» ‹›

Canceling monthly subscription

If you'd like to cancel the monthly webfonts subscription, simply log in to your account, go to My Webfonts, and either Disable, or Delete the active project. Alternatively, you can keep it Active, setting the Monthly Budget to 0 Euro (in Stats).

Extra bandwidth

When reaching the limit of free 500MB per month, you will receive an invoice at the end of the month for the bandwidth that go over the free limit. There is currently no way to pre-pay the bandwidth, you receive an invoice after exceeding the limit.

You will be asked to pay by a credit card for the first monthly payment, and future extra bandwidth payments will automatically charge your credit card.

Hinting

Quality of font rendering varies greatly depending on platform and application. Mac OSX uses a generic rendering algorithm which displays all fonts equally well and completely ignores font hinting. Windows on the other hand only displays well TrueType fonts which have been optimized (hinted) for the screen. Most problems are with very old versions of Windows 95, where ClearType rasterizer is turned OFF.

We offer two different kinds of fonts Screen fonts extensively hinted for the best results in small sizes for Windows, resulting in sharp legible text
http://www.typotheque.com/fonts/on_screen_reading

All other Typotheque fonts which are simply auto-hinted. Those will work just fine in all operating systems, but if majority of your users use old Windows, than we recommend that you use it in display sizes only (16pt higher). In either case, we recommend that you take the free webfont trial licence, so you can test the fonts in the real situation.

For more details about hinting and screen optimisation, please have a look at this explanation.

Text renders in Caps only, what to do?

Typotheque webfont system offers a possibility to apply Small Caps replacing the standard lower case letters with true small capitals. Sometimes people accidentally turn this feature on, which results in seeing all capital text. You can turn the Small Caps on and off at any time directly in your Account > Webfonts. Because we use a large network of distributed servers, changing the settings take a few hours. In some cases it may take up to 24 to update all the servers and files.

Can I change the billing address for the monthly subscription?

Yes, you can change the billing details at any time. Log in to your Account, and go to My Webfonts. Click on the tab Users, and enter the email address of the new user. The new user must have a Typotheque account with this email address. The new user will receive an email and will need to confirm the change.

Problem with anti-aliasing

A few users reported on issues with anti-aliasing of webfonts. Almost always these issues were local, and impossible to reproduce on other computers. While we don't know exactly the source of the problem, the problem seems to be caused by the OS, and not the fonts.

Using external monitors on MacOS is a possible problem, there is a bug in Snow Leopard that disables LCD font smoothing, and there is a Terminal command that fixes it. http://hints.macworld.com/article.php?story=20090828224632809

This is a known Webkit bug — any text with @font-face applied will be rendered without anti-aliasing if there is a text element without anti-aliasing applied preceding it. The bug is described here: http://konstruktors.com/blog/web-design/3190-webkit-bug-anti-aliasing-for-font-face-fonts/

If you experience a similar problem, please report the specific applications and OS that you use.

Webfont options

Typotheque offers three different ways of using fonts on the web. Typotheque Webfont service is the simplest option, ready to use in minutes. Clients receive CSS code for using fonts online, and manage their project via Typotheque online account. Actual font files are hosted on a remote network of servers (CDN), and clients don't have direct access to the files. This removes the complexity of serving the right font formats to the right browser. With the Webfont service, clients receive 500MB of free font bandwidth per months. If the website exceeds this limit, clients will pay for the extra bandwidth. In our experience, 90% of websites never exceed the free allocated bandwidth limit. If you are not certain how much traffic your website generated, you can always use the Free Webfont trial licence to get some data about your website's font use.

Read more about Webfont service (and watch the demo video).

For larger website that prefer to control their own assets we offer another option - Self-hosting webfont licence. With this webfont licence, the client manages the assets and has a full control over the files. It requires some programming skills as the fonts files will be installed on your own server, following our instructions. You can choose from two implementation methods, either using PHP scripts, or HTTP referrer script. Both ways are safe and reliable, and prevent fonts from being copied casually. Our self-hosting webfonts come with different tiers, depending on the monthly page views. When you exceed the number of page views, you are expected to upgrade the licence accordingly.

Finally, for very large sites, we also offer Server Licence, which don't come with any page view limitations. Server license fee is one time cost, there are no additional monthly or yearly annual charges.

Do you cache fonts?

Typotheque font files remain in cache for one week, and CSS files are cached for 5 minutes. Practically speaking, this means that font data is loaded significantly faster, while changes in CSS can be still visible in 5 minutes. Returning visitors and visitors who visit multiple pages will experience faster loading times, as the fonts don’t need to be requested from the server, but are loaded from browser’s cache. This reduces webfont data transfer, so we don't count multiple page views, and page reloads, only count unique number of visitors.

Special characters

Typotheque Webfont Service supports all characters that our fonts support. Look up the particular font that you are interested in, and see all Glyphs that it support. For example, Fedra Sans Book supports over 2500 glyphs.

When creating webfont project in your account, select which languages you would like to support. You can choose as many languages as you like. Should you want to support just a specific glyph, enter it in the Custom field, so you are sure it is embedded in the webfont.

Text with Small Caps

To use Small Caps combined with Upper and Lower case, you need to create two different webfont projects. One for setting normal next, the other for the small caps.

Didn