Typeface

Load and organize your fonts in an orderly fashion as well as make them available in a variety of tools throughout all of Foundry. Use web-safe fonts, Google Fonts or self-host your own custom fonts locally.

Examples

The Typeface tool is focused solely on improving importing and managing your font choices for your page. It does not create any output itself on the published page, thus we don't have anything we can show you here as an example.

I always knew someday you’d come walking back through my door. I never doubted that. Something made it inevitable.

Foundry's Typeface tool is the perfect way to load and manage your fonts for your project. Whether you're using Google Fonts, standard web-safe fonts, or hosting your own on your server – Typeface can handle them all. And best of all it is integrated throughout Foundry, providing you access to these fonts for your various other tools.

Settings

Parent Tool

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

Visible

Allows you to customize how the child items and their information, which are the individual fonts, are displayed within Edit Mode.

Google Fonts

Use Google Preconnect

This feature initiatizes an early connection to the Google Fonts server, which helps in speeding up the load time for your Google Fonts.

HTML Comment

HTML Comment

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

Custom

This field allows you to replace the default HTML Comment with your own text.

Child Item - Standard Font

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

Show CSS Classname

Typeface uses a CSS classname to apply your fonts to elements on the page. It is rare that you'll ever need to know or see this classname, but if you do need or want this classname you can enable this checkbox to get it.

Font Name

Font Name

This is the name of the standard web 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. You can provide multiple font names here, separated with commas.

Assign

Assign To

Typeface lets you assign a font family to a typeface within the tool. This typeface will allow you to access your fonts from other large variety of other Foundry tools. The Typeface tool gives you up to 15 typeface slots to assign your individual fonts to. You normally will not need this many slots, but they’re available in the event that you do.

Normal Weight

When using tools like Paragraph, 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 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 tools such as Paragraph. Bold text is normally 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.

Fallback Font

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 assigning to this typeface slot. You may separate multiple fallback fonts using a comma.

Advanced

Your Notes

This is a simple text field that allows you to leave notes to yourself for reference at a later time.

Child Item - Google Font

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

Font Name

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. You want to also ensure you have no leading or trailing spaces on the name.

Assign

Assign To

Typeface lets you assign a font family to a typeface within the tool. This typeface will allow you to access your fonts from other large variety of other Foundry tools. The Typeface tool gives you up to 15 typeface slots to assign your individual fonts to. You normally will not need this many slots, but they’re available in the event that you do.

Normal Weight

When using tools like Paragraph, 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 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 tools such as Paragraph. Bold text is normally 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

Font Weights

The Weight Loader settings allow you to load various different font weights and styles for your chosen 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 in the Control Center, 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 separate 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

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 assigning to this typeface slot. You may separate multiple fallback fonts using a comma.

Advanced

Font Load

This is the loading mode for the Google font CDN. Each have their own positives and negatives.

Normal

Do not implement any font swapping during the page load process. The font will be displayed once it is fully loaded. This is the deault and recommended method.

Swap on Page Load

Instructs the browser to use the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text.”

Fallback

The browser will hide the text for about 100ms and, if the font has not yet been downloaded, will use the fallback font instead. It will swap to the new font after it is downloaded, but only during a short swap period (probably 3 seconds).

Optional

Like fallback, this value tells the browser to initially hide the text, then transition to a fallback font until the custom font is available to use. However, this value also allows the browser to determine whether the custom font is even used at all, using the user’s connection speed as a determining factor where slower connections are less likely to receive the font.

Extended Latin Characters

Enabling this feature lets the Google Fonts server know that you want it to include the additional Extended Latin Characters in the font.

Cyrillic Characters

Enabling this feature lets the Google Fonts server know that you want it to include the additional Cyrillic Characters in the font.

Your Notes

This is a simple text field that allows you to leave notes to yourself for reference at a later time.

Child Item - Self-Hosted Font

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

Font Name

Font Name

This is the name of the font you’re adding to Typeface from your Self-Hosted Font.

Assign

Assign To

Typeface lets you assign a font family to a typeface within the tool. This typeface will allow you to access your fonts from other large variety of other Foundry tools. The Typeface tool gives you up to 15 typeface slots to assign your individual fonts to. You normally will not need this many slots, but they’re available in the event that you do.

Normal Weight

When using tools like Paragraph, 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 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 tools such as Paragraph. Bold text is normally 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 & Style

Font Weights

The Weight & Style section is where the heavy lifting happens when loading your font's files. For each weight of font you wish to use you will select the styles you wish to include. When a style is enabled you will be shown a control for selecting a file for the style and weight of font. You'll load these from the Resources section, where you've inserted your font files.

Fallback Font

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 assigning to this typeface slot. You may separate multiple fallback fonts using a comma.

Advanced

Swap Fonts on Page Load

Instructs the browser to use the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text.” This is off by default.

Your Notes

This is a simple text field that allows you to leave notes to yourself for reference at a later time.