Site Studio
Set up font libraries and font stacks
Site Studio allows you to manage font libraries and font stacks used by your website. There are two steps to the process:
When setting up font libraries you have three options:
To upload fonts:
Many premium font providers (E.g. fonts.com, typography.com) require license information to be included with your CSS and a tracking script for page views. If a tracking script is required, this would need to be implemented in a custom theme.
To add license information:
To import a web font:
When uploading a font package into Site Studio, please ensure you only have one instance of each font format (EOT, TTF, WOFF, WOFF2) included.
If your font supports multiple weights, you will need to export each of these as separate packages. You will also need to create separate font stacks for each weight.
Once you've uploaded or imported your fonts you need to set up your font stacks.
To set up your font stacks for imported or uploaded fonts (Highlighted with pink dashed line):
To set up a system font stack (Highlighted with blue dashed line):
When adding a new font stack the label and variable fields are linked by default. You can link or unlink the font stack label from the SCSS variable to allow the label to be different from the variable.
To unlink a font stack label and variable:
If this content did not answer your questions, try searching or contacting our support team for further assistance.
To upload fonts:
Many premium font providers (E.g. fonts.com, typography.com) require license information to be included with your CSS and a tracking script for page views. If a tracking script is required, this would need to be implemented in a custom theme.
To add license information:
To import a web font:
When uploading a font package into Site Studio, please ensure you only have one instance of each font format (EOT, TTF, WOFF, WOFF2) included.
If your font supports multiple weights, you will need to export each of these as separate packages. You will also need to create separate font stacks for each weight.
Once you've uploaded or imported your fonts you need to set up your font stacks.
To set up your font stacks for imported or uploaded fonts (Highlighted with pink dashed line):
To set up a system font stack (Highlighted with blue dashed line):
When adding a new font stack the label and variable fields are linked by default. You can link or unlink the font stack label from the SCSS variable to allow the label to be different from the variable.
To unlink a font stack label and variable:
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Site Studio