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.
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.
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.
Allows you to customize how the child items and their information, which are the individual fonts, are displayed within Edit Mode.
This feature initiatizes an early connection to the Google Fonts server, which helps in speeding up the load time for your Google Fonts.
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.
This field allows you to replace the default HTML Comment with your own text.
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.
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.
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.
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.
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.
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.
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.
This is a simple text field that allows you to leave notes to yourself for reference at a later time.
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.
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.
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.
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.
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.
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.
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.
This is the loading mode for the Google font CDN. Each have their own positives and negatives.
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.
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.”
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).
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.
Enabling this feature lets the Google Fonts server know that you want it to include the additional Extended Latin Characters in the font.
Enabling this feature lets the Google Fonts server know that you want it to include the additional Cyrillic Characters in the font.
This is a simple text field that allows you to leave notes to yourself for reference at a later time.
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.
This is the name of the font you’re adding to Typeface from your Self-Hosted Font.
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.
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.
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.
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.
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.
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.
This is a simple text field that allows you to leave notes to yourself for reference at a later time.