Using Fonts Live – Step by Step Tutorial
This tutorial walks you through each step of the process, from finding the perfect web font, to adding it to your website.
1. Selecting a Web Font
1. Click Catalog from the main navigation menu to start browsing our collection of premium web fonts.
2. Use the Font Filter, Size Slider, and Search to find the right font(s) for your project.
3. Click on a font for more detail, including Samples and Pricing.
4. To purchase a font, click Buy Web Type.
5. Select a web font license type, or a 30-day free trial.
6. Once you have the fonts you need, click Checkout.
7. Sign in, or register for a new account and click Sign Up.
8. If you chose a paid plan, enter your credit card and billing information, otherwise, read and accept the Web Font Agreement and click Continue.
2. Create a CSS Resource
1. Sign in to Fonts Live and click My Account
2. Click the +New project button
3. Enter the website information for your new project, including a Project Name, Live URL, and Test URL (if applicable).
4. Select the font(s) you would like to use and click Save.
3. Updating Your Website
1. You can update the CSS Resource name by clicking Edit, or the font-family name by clicking Customize font-family.
Tip: If a font contains more than Latin 1, you will see options for additional code pages by clicking the gray drop-down arrow next to the font. You can select to keep or remove features in the font to make the file size smaller. If you change any settings, make sure to click Save Changes.
Tip: If your site has a very small character set range, the ‘Custom Text’ option can be used to apply a specific text string. Only those glyphs would then be saved in the font, providing a further file size reduction (and faster font download time).
2. Copy and paste the Resource Code in the
tag of each page you want to use the Resource.
3. Using the CSS sample, update your font-family tags with the new fonts to add the CSS rules to your CSS file.
Tip: if your website uses a template for its design, then add the Resource Link above the tag in the template. Then it will automatically appear on every web page that uses this template.
Tip: CSS can be internal, external, and inline. You should update the font-family based on the kind of CSS you are using.
NEW: FontsLive now provides support for the Google WebFont Loader JavaScript Library. If you have experience with JavaScript you can access the code for this optional feature by clicking on View Demo.
Additional Support
If you have additional questions, please visit our support section or contact us.