How it Works

Quick to set up, easy to integrate, and painless to deploy: here’s how Cloud.typography makes webfonts happen.

Setting Up

Fine typography on the web has never been simpler. Using Cloud.typography, just choose your fonts in the browser, and call for them using 100% CSS.

Pick the Fonts

Shop our entire font collection — or use Hoefler & Co. fonts you’ve already purchased, without having to buy them again.

HTML<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>My website!</title>
	<link rel="stylesheet" type="text/css" href="//cloud.typography.com/1234/fonts.css" />
</head>
<body>
CSS/* Stylesheet.css */

h1 {
	font-family: 	"Gotham A", "Gotham B";
	font-weight: 	200;
	font-style: 		normal;
	font-size:		72px;
	letter-spacing:	-3px;
	color:			#333;
}

Add the Code

Add the provided CSS Key to your pages, and the font declarations to your stylesheets, and you’re ready to go.

Behind the Scenes

The Delivery Agent

To deliver browser-specific fonts without any database calls, Cloud.typography custom builds an autonomous Delivery Agent that runs in the cloud.

  1. From its massive database of font files, each built for one specific browser and platform,

  2. the system gathers all the webfonts needed to render your palette in every environment.

  3. It constructs an application capable of recognizing requests from different browsers,

  4. that can instantly supply each browser with exactly the fonts that deliver the best experience.

  5. This application runs in the cloud, fully cached across more than 125,000 servers worldwide.

Development Mode

Developing in the Cloud

While you’re shaping your palette, Cloud.typography’s Development Mode
lets you deliver fonts without using your monthly pageviews.

Cloud.typography’s Development mode delivers fonts directly from the cloud, using the Development Bandwidth that’s included free with your subscription.

Font delivery works through the CSS Key that you add to your pages. This link points visitors to the Delivery Agent that runs on every Cloud.typography server on the network, where requests are automatically answered by the nearest server. For 90% of internet users, the nearest server is just a single network hop away.

Once you’ve settled on a palette, switch into Production mode to start serving the fonts from your own server infrastucture, alongside the rest of your site’s assets.

Publishing Your Project

Preparing to Launch

When you’re ready to deliver at scale, upshift into production mode. There’s nothing to change in your code, and nothing extra to manage.

  1. Pick a spot on your webserver for serving the fonts.

  2. Download the .zip file of your project’s webfont data.

  3. Upload the enclosed folder to the spot you picked.

  4. Confirm that everything’s been installed correctly…

  5. …and you’re done.

Production Mode

Delivering Production Projects

Cloud.typography’s Production Mode combines the benefits of server-side webfont intelligence with the cost-effectiveness of your own hosting solution.

Cloud.typography is designed to work with your existing infrastructure, whether it’s a shared web host or a CDN. In Production mode, serve the webfont data alongside your site’s other assets, without any changes to your code or any special server configurations.

Delivery works as before, with your CSS Key pointing to the cloud, and your Delivery Agent responding from the nearest server. Identifying the type of browser that’s asking for fonts, it immediately redirects each request to the correct files on your server. Cloud.typography’s Production mode is designed to scale effortlessly, with no performance implications, and no need to refactor your code.

Take the Tour

From Hoefler & Co. comes a webfont solution not just for developers, but for typographers. Learn More

Your project exceeds the 1,000k limit, so your changes have not been saved.

Try adding fewer fonts, fewer styles, or configuring the fonts with fewer features.