CSS names for font families in kits
Each font family in a kit has one or more CSS names assigned to it. These are the names that you use in
font-family declarations within your own CSS in order to use the fonts on your page.
CSS names can change from kit to kit
It's important to note that the same font family can have different names in different kits. This is why it's a best practice to always get the CSS
font-family names to use from the API instead of guessing or inferring them from another piece of information, like the name or the slug.
You can find the appropriate CSS names to use for the font families in a kit by making a
GET request to
kits/:kit/published. Either use all the values of the
css_names property to build your own
font-family stack, or use the
css_stack property, which already contains the user-selected fallback fonts and is properly quoted and ready to be used as a
Segmented vs. unsegmented CSS names
Older kits used a method of font protection that involved splitting a single font file in half, with half of the characters in one file and the other half in a different file. We've since found better means of protecting fonts, but the old style segmented names (e.g.
droid-sans-2) have persisted. We never change the style of
font-family names in an existing kit because that would require changing all the CSS associated with that kit.
However, when creating new kits, you can choose the style of CSS names that the kit should use for all font families in the kit. Just include the
segmented_css_names parameter when making a
POST request to
kits. The options are:
true- Use segmented names (e.g.
false- Use a single unsegmented name (e.g.
The default for
segmented_css_names when using the API is
true to maintain backwards compatibility for applications that expect segmented CSS names for newly created kits.