Features

  • Load your web safe, Google and Typekit fonts all in one place
  • Make these fonts available in a variety of different Foundry stacks
  • Include fallback fonts for each font family
  • Load just the font weights you need

Example

Below are a few columns into which we’ve placed some Header and Paragraph stacks. We’ve loaded some Google, Typekit and web safe fonts on the page using the Typeface stack and have styled this content using these fonts.

Be sure to watch the Typeface tutorial videos to learn how to setup and use Google Fonts and Adobe Typekit within the Typeface stack.

Google Fonts

Merriweather

This paragraph uses the Roboto font, which we’ve loaded through Google Fonts for this example. It is a clean sans-serif font that is nice and legible. For this example we’ve loaded the 400 and 700 weight fonts as well as their italic versions.

Adobe Typekit

Factoria

This example paragraph is set with the Skolar Sans font from Adobe’s Typekit. It is a distinct, easy-to-read sans-serif font. Since we’re using it for a paragraph we’ve loaded the 400 and 700 weight fonts as well as their italic versions.

Web Safe Fonts

Helvetica

This paragraph uses the web-safe font titled Georgia, which we’ve loaded through Standard font option in Typeface for this example. It is a nice looking serif font.

Mixed Fonts

Skolar Sans

This paragraph uses the Merriweather font, which we’ve used above for a header. For this example we also loaded the 400, 400 Italic, 700 and 700 Italic fonts.


Using Typeface

Typeface leverages the power of Google Fonts and Adobe’s Typekit (as well as standard web-safe fonts) to allow you to manage the fonts on your page and use them within some of the Foundry stacks. Dealing with these outside entities means you’ll need to follow the guidelines below very carefully to make sure everything works as it should.

We’ve made available tutorials that show you how to use Typeface as well as how to choose and setup your fonts in both Google Fonts and Typekit. Be sure to watch the tutorial videos to get up and running with Typeface.

General

Using a Typekit Font
Enable this feature when using a Typekit font within the Typeface stack. This allows the stack to load the necessary javascript that Typekit requires. When in enabled you’ll also need to provide your Typekit ID. This ID is found within Typekit’s Embed Code screen on their site. If you’re unsure where to find this, please watch the Typekit tutorial video we’ve provided on the tutorials page.

Advanced

Collapse in Edit Mode
Use this feature to collapse the child-stacks within Typeface to save a bit of space when editing your pages in Stacks.

Google Fonts (Child-Stack)

Font Name

This is the name of the font you’re adding to Typeface from Google Fonts. It is very important that the name you enter here matches the name of the font on Google Fonts exactly. We cover how to ensure that you get the correct font name in our Typeface tutorials on the videos page. Be sure to watch these videos as using the correct font name is essential.

Assign

Assign To
Typeface lets you assign a font family to a typeface within the stack. This typeface will allow you to access your fonts from other Foundry stacks. The Typeface stack gives you up to 15 typeface slots to assign your font to. You normally will not need this many slots, but they’re available in case you do.

Normal Weight
When using stacks like the Paragraph stack, the standard weight of the font is going to be referred to as the Normal Weight. This setting allows you to specify something other than 400 as the Normal Weight for your body text. It is not common to need to change this setting away from 400, but as some fonts do not have a 400 weight, we’ve added this feature in case it is needed.

Bold Weight
This setting is used to specify which font weight you wish to assign to bolded text within stacks such as a Paragraph stack. Bold text is usually a 700 weight, but as fonts vary and your needs may be different from the norm, you can set the bold weight here to the weight you like.

Weight Loader

The Weight Loader section allows you to load various different weights and styles for your font. By default the 400 and 700 weight of a font is loaded when a Google Font is added to Typeface. Enabling other fonts is as easy as clicking the Normal button for a specific weight. If you plan to use a font for body text, as in a Paragraph font or as your Base Font, you may also want to enable the Italic version as well.

  • Important: For every button you enable within the Weight Loader section you are loading a font, as this is how embedded fonts like Google Fonts work. The more fonts you load the slower it may make your page load. Only load the weights you know you'll be using.
Fallback Font

In this section you’ll specify a font for browsers to fallback to in the eventuality the visitor’s browser does not support the font you’re loading or if for some reason the Google server has a problem loading the font.


Typekit (Child-Stack)

Font Name

This is the name of the font you’re adding to Typeface from Adobe’s Typekit service. It is very important that the name you enter here matches the name of the font on Typekit exactly. We cover how to ensure that you get the correct font name in our Typeface tutorials on the videos page. Be sure to watch these videos as using the correct font name is essential.

Assign

Assign To
Typeface lets you assign a font family to a typeface within the stack. This typeface will allow you to access your fonts from other Foundry stacks. The Typeface stack gives you up to 15 typeface slots to assign your font to. You normally will not need this many slots, but they’re available in case you do.

Normal Weight
When using stacks like the Paragraph stack, the standard weight of the font is going to be referred to as the Normal Weight. This setting allows you to specify something other than 400 as the Normal Weight for your body text. It is not common to need to change this setting away from 400, but as some fonts do not have a 400 weight, we’ve added this feature in case it is needed.

Bold Weight
This setting is used to specify which font weight you wish to assign to bolded text within stacks such as a Paragraph stack. Bold text is usually a 700 weight, but as fonts vary and your needs may be different from the norm, you can set the bold weight here to the weight you like.

Weight Loader

There is no Weight Loader section for Typekit. This is all handled on their site. We cover how to set this up in our tutorial videos on Typekit.

  • Important: Don't forget that you will need to provide your Typekit ID in the main Typeface stack in order for your Typekit-based fonts to work.
Fallback Font

In this section you’ll specify a font for browsers to fallback to in the eventuality the visitor’s browser does not support the font you’re loading or if for some reason the Adobe Typekit server has a problem loading the font.


Standard (Child-Stack)

Font Name

This is the name of the standard font you’re adding to Typeface. Web safe fonts are those that most browsers and operating systems are capable of loading. An example of such a font would be Arial or Helvetica. Many times these will contain a couple of fallback fonts to ensure that things look as you intend.

Assign

Assign To
Typeface lets you assign a font family to a typeface within the stack. This typeface will allow you to access your fonts from other Foundry stacks. The Typeface stack gives you up to 15 typeface slots to assign your font to. You normally will not need this many slots, but they’re available in case you do.

Normal Weight
When using stacks like the Paragraph stack, the standard weight of the font is going to be referred to as the Normal Weight. This setting allows you to specify something other than 400 as the Normal Weight for your body text. It is not common to need to change this setting away from 400, but as some fonts do not have a 400 weight, we’ve added this feature in case it is needed.

Bold Weight
This setting is used to specify which font weight you wish to assign to bolded text within stacks such as a Paragraph stack. Bold text is usually a 700 weight, but as fonts vary and your needs may be different from the norm, you can set the bold weight here to the weight you like.

Weight Loader

There is no Weight Loader section for Standard font. Each web safe font will have all of its weights available to you if they exist.

Fallback Font

In this section you’ll specify a font for browsers to fallback to in the eventuality the visitor’s browser does not support the font you’re loading. You may separate multiple fallback fonts using a coma.

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2016 Elixir Graphics | Contact Us