https://www.fonts.com/black-friday-cyber-monday-font-sale?utm_source=fonts.com&utm_medium=tophat&utm_campaign=BFCM2023

Skip to main content

Quick Start Guide for Creating Your Web Fonts Project


I'm all set, take me to Manage Web Fonts to build my project

1. Select & Add Fonts



Search & Browse thousands of Fonts.com Web Fonts to find those perfect for your project.

2. Add Domains [Legacy Customers]



Simply provide the URLs of the domains you want your fonts served to; it's that easy.

3. Add & Edit CSS Selectors



Use our flexible options for adding and editing CSS Selectors for your chosen fonts.

4. Publish



You're now ready to publish! Select a preferred publishing method, and set your project live.



Select & Add Fonts



A. Search for Fonts



Use the search bar present throughout Fonts.com to search for fonts by name, designer, or source foundry. You can also search for fonts by keyword or theme.

B. Browse Fonts



In the Browse Fonts section of Fonts.com you can additionally search for newly released, featured, and best selling fonts. You can also choose to search by typeface classification.

C. Add Fonts to Your Project



Including fonts in your project is easy – you can add the fonts you want through any search results page, font family page, or individual product page.



Add Domains [Legacy Customers]


 



Simply provide the URLs of the domains you would like your fonts served to; it's that easy. An asterisk followed by a period (*.) can be used as a wildcard to add multiple subdomains to your Web fonts project.

For instance, listing "*.example.com" as your domain would allow you to use the Fonts.com Web Fonts service on subdomains such as first.example.com, second.example.com as well as third.example.com.



Add CSS Selectors


 

A. Add CSS Selectors



First, identify your website's CSS selectors, and add them each by name in the Selectors panel. This will allow the styled elements of your website to be assigned specific Web fonts.

Selectors are found in your site's CSS. Some of the more popular CSS selectors to look for are: h1, h2, div, body, bodycopy, header and footer. If you prefer to specify your fonts directly within your own CSS, you can do that as well, simply skip ahead to Publish Options.

B. Assign Fonts



Once you have added your site's CSS selectors, you can then proceed to assign fonts. Simply click the drop down menu under each selector and choose from the list of fonts you selected earlier. You will then see a preview of how your text for each selector will look.

C. CSS Sucker



Not sure which selectors your website employs? You can also use our CSS Sucker tool to extract a list of CSS selectors that are used on your website.



Publish Options


 

A. JavaScript [Legacy Customers]



The JavaScript publishing option is available to legacy customers and is used by copying and pasting the code into your site’s HTML or CSS. If you prefer to specify your fonts directly within your own CSS, you can do that, too – simply reference the font-face names provided, and include them in your HTML or CSS code.

B. CSS [Legacy Customers]



We also provide a Non-JavaScript publishing option as well. It is available to legacy customers and is used by copying and pasting the code into your site’s HTML or CSS. If you prefer to specify your fonts directly within your own CSS, you can do that, too – simply reference the font-face names provided, and include them in your HTML or CSS code.

C. Self-Hosted



Here you can download your self-hosting kit containing your fonts in the Web font formats needed to support all major browsers. Also included is an HTML demo page with setup instructions for adding the CSS syntax to your code, as well as a preview of your Web fonts in use.