1. Find Your Fonts Famous fonts.
    Favorite foundries.
  2. Create a Project In our easy-to-use type drawer system.
  3. Publish Your Site Let us take care of the technical details.
  4. Settings and Extras Get the most out of your fonts.

Browse the Font List

Check out what’s in our collection.

The WebINK library includes thousands of high quality fonts from respected type foundries.

browse-fonts-nofilters

Search and Filter

Quickly find fonts that meet your needs.

Quickly browse all of the WebINK fonts with built-in tools for filtering and searching.

Use the search field at the top right of the page to search for a specific font. Enter part of a font name and click Go to find fonts.

Want to look at only a specific type of font? It’s easy to filter by Classification, Foundry, Language and more. Click on a filter to apply it.

Change your mind? Remove a filter by clicking the x in the list of applied filters.

filter fonts

Font Family Details

Every thing you need to know about font families.

adelle-web-family-detailsThe font family details page shows you samples of all the styles available for a given font family. Type your own sample text and try it out at any size.

Does one of the family members stand out from the others? Learn more about an individual font just by clicking it to open the Font Specimen page.

adelle-web-family

Font Specimen Details

Get the big picture for any font.

adelle-web-face-detailsThe font specimen detail page shows larger specimens of the font.

You can also see how the font will look with contrasting backgrounds.

The details on the page also tell you the best minimum size for the font and how big the font file is to download.

specimen information

Make Your First Project

Let’s get started

After creating your account, go to the Type Drawer page and click the New Project button.

create typedrawer

Enter a name for your project and click Create Project.

create project

Add fonts

When you create a project, it will open in a page of its own. Click the Add Fonts button to visit the WebINK library and choose some fonts.

add fonts

The WebINK library is loaded with thousands of fonts. Add as many fonts as you need to any project in your type drawer.

browse-fonts-nofilters

Quickly add any font to a project by clicking the “Add to Project” button.

font-addfont

Domains

Where to deliver your fonts

Domains tell WebINK where you want to serve fonts for this project. Include development domains as well as final domains.

From the Project Details page, click the Add Domains button. Enter the domain name or IP address as well as an Alias, aka friendly name, for the domain, and click Add to Project.

You can add more domains later.

If you are not sure whether to add the domain (DNS) name or the IP address of the server you are adding to the approved domains list, add both.

add domains
add domains

Integrating Fonts into your Site

Getting the Code

After selecting fonts and adding to the project, it’s time to integrate into your site. WebINK uses a dynamically generated, hosted CSS file to integrate fonts. You merely add a short snippet of code to your site.

On the Project Details page, click the Generate CSS for this project link.

The popup window presents you with two code styles – Import or Link.

The Import code can be added to either your CSS file, or to the header of your HTML page. If you have a separate stylesheet for your fonts, you can use the Link method. Copy the code that best suits your needs, and add it to your site.

Link style (recommended)

<link href="//fnt.webink.com/wfs/webink.css?project=732093DC-A632-4117-9621-BC5FF56B7932&fonts=37437296-19E9-5916-9448-2D4ADE086DC5:family=AdelleWeb-Regular:style=normal:weight=normal" rel="stylesheet" type="text/css"/>

Import Style

<style type="text/css">@import url("//fnt.webink.com/wfs/webink.css?project=732093DC-A632-4117-9621-BC5FF56B7932&fonts=37437296-19E9-5916-9448-2D4ADE086DC5:family=AdelleWeb-Regular:style=normal:weight=normal");</style>

Add the new fonts to your font stack

Time to make it pretty

After integrating the Import or Link code, you need to apply the new fonts to elements on the page.

From the Import or Link code, copy the font family name and add it to the appropriate CSS font stacks.

h1 { font-family: Header; }

We Make it Simple

No fuss, no muss

With one line of code, you get fast global delivery, the correct font for every browser, and security. It just doesn’t get any easier.

There’s no need to use JavaScript, Flash, or static graphics to get the exact look that you want for your website.

<link href="//fnt.webink.com/wfs/webink.css?project=732093DC-A632-4117-9621-BC5FF56B7932&fonts=37437296-19E9-5916-9448-2D4ADE086DC5:family=AdelleWeb-Regular:style=normal:weight=normal" rel="stylesheet" type="text/css"/>
<div style="font-family: 'AdelleWeb-Regular';">
	<h1 style="font-size: 36px;">Adelle Web Regular</h1>
	<p style="font-size: 24px;">Forsaking monastic tradition, twelve jovial friars gave up their vocation for a questionable existence on the flying trapeze. The public was amazed to view the quickness and dexterity of the juggler. We quickly seized the black axle and just saved it from going past him. A mad boxer shot a quick, gloved jab to the jaw of his dizzy opponent. Six javelins thrown by the quick savages whizzed forty paces beyond the mark. We promptly judged antique ivory buckles for the next prize.</p><span style="font: 80%/1.4 sans-serif; color: #444; display: block;">Paragraph is set for minimum recommended pixel size of 24px</span>
</div>

Adelle Web Regular

Forsaking monastic tradition, twelve jovial friars gave up their vocation for a questionable existence on the flying trapeze. The public was amazed to view the quickness and dexterity of the juggler. We quickly seized the black axle and just saved it from going past him. A mad boxer shot a quick, gloved jab to the jaw of his dizzy opponent. Six javelins thrown by the quick savages whizzed forty paces beyond the mark. We promptly judged antique ivory buckles for the next prize.

Paragraph is set for minimum recommended pixel size of 24px

How the Web Font Gets to your Page

You provide the site, we provide the font

When someone visits your site, your web page sends a request to one of the WebINK servers.

The WebINK server determines what browser your visitor is using and sends the precise font format that’s best for the browser and OS of your visitor.

The browser then renders the font just as if it was already installed on the visitor’s computer (or tablet, or smartphone).

WebINK uses the Amazon CloudFront Network

Speed is our middle name

WebINK sends the requested fonts when the page loads. Because WebINK uses Amazon CloudFront, fonts are delivered from servers that are closest to your site’s visitor.

As our partner, Amazon offers redundancy and duplication that ensures reliability, and delivers fonts quickly and consistently to web browsers whenever and wherever they’re needed.

Subsetting

How to get the most out of your subsets.

Fonts typically consist of dozens, hundreds, or even thousands of characters. Most of the time we only think about the letters and symbols on our keyboards (if we think about them at all), but when it comes to the World Wide Web there are two words to keep in mind: World Wide.

WebINK allows you to specify a subset of characters to include in your project. This can reduce the time needed for fonts to download, which can make your site load faster for your visitors.

If all of your site is in English, then you can set your project to be frugal and use only English-language characters.

If you have pages in French, German, or other Western European languages, you can use the Western European character set.

If you have a truly world wide website, you can use the Full character set. Any character available in the fonts you choose will be there waiting for you to use it on one of your pages.

The Specimen page for each font shows the approximate download size of each font subset. Most of the time the difference between English and Full is less than 50%, so you may decide to err on the side of caution and always use the Full character set.

If you need to change your project to use a different subset in the future, it is very easy to do.

edit project

More About Domains

Development and Live Modes provide flexibility

Domains tell us what websites you want us to deliver your fonts to. For each project, you can add multiple domains, and we’ll deliver all that project’s fonts to each and every page in those domains.

Which domains should you include in a project? That depends on how you are using projects to keep your work organized and mirror the way you develop.

If you design websites for clients, you could create one project per client, including all their fonts and domains. You can test and review projects in Development Mode (free, up to 10 unique visitors per day) and when it is time to switch to Live Mode, you can transfer ownership of the project to your client. If you work in a company and have only corporate websites to maintain, you can keep all your fonts and domains in one project.

add domains

Development Mode

Need to test out some fonts on a project before deploying? It’s easy to do with WebINK.

All projects start out in Development Mode, which is limited to 10 unique visitors per day. It’s perfect for developing a project and getting review comments.

When in Development mode, you can test out as many fonts as you like on as many sites that you want. The only limit is the number of unique visitors.

When you’re done developing, transfer your project to your client’s WebINK account, switch it to Live Mode and you’re good to go!

NOTE: WebINK is in the process of winding down the service. As of June 16, 2014, only current, paid accounts can create new projects.

development mode

Transferring Projects

Making the Handoff

WebINK is the only service that gives you the ability to easily transfer projects between accounts. For example, you can develop a project with your account using the Development Mode (free, up to 10 unique visitors per day), and then transfer the project to your client/boss/company when you’re ready to switch to “Live Mode”. The client is happy, and better yet, you’re never charged a cent.