{"section":"tutorials","requestedLocale":"en","requestedSlug":"customizing-your-stores-typography","locale":"en","slug":"customizing-your-stores-typography","path":"docs/en/tutorials/storefront/styles/customizing-your-stores-typography.md","branch":"main","content":"The typography of your online store is a tool for showing your brand identity to your customers.\nIn the Admin, you have the flexibility to customize your store's typography to meet your business needs.\n\n> ⚠️ Keep in mind that changes made to your store's typography in the **Storefront** override typography changes made in the store's code. Please contact your development team and make sure that these changes will be set in the Storefront or in your store's code.\n\n## Adding custom font families\n\n1. In the VTEX Admin, go to **Storefront > Styles**.\n\n2. Select the kebab menu icon (three dots).\n\n3. Click **Edit > Typography > Font family**.\n\n4. Click **Add custom font**.\n\n5. In the **Font family** field, create a name for the font.\n\n    ![familia-de-fontes-giff-en](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/styles/customizing-your-stores-typography_1.gif)\n\n6. Click **Upload** to upload the desired font file.\n\n> ⚠️ The font family file must have one of the following extensions: *.ttf* or *.woff*.\n\n7. Once the files have been uploaded, choose a font style. The accepted values are: `Thin`, `Extra Light`, `Light`, `Regular`, `Medium`, `Bold`, `Extra Bold`, `Black`, `Thin Italic`, `Extra Light Italic`, `Light Italic`, `Regular Italic`, `Medium Italic`, `Bold Italic`, `Extra Bold Italic` and `Black Italic`.\n\n8. Click `Save`.\n\n## Configuring type tokens\n\nAfter adding new font families, you can apply them to your store's text content using **Type tokens**.\n\nThe **Type tokens** option displays all customizable text content in your store. Here's what you can customize using type tokens:\n\n- **Headings:** These are the first elements that users read and give information most efficiently, using no more than the necessary number of words. There are six headings. `Heading 1` is the most prominent heading style, and `Heading 6` is the least one.\n\n- **Body:** This is the text style designed to improve paragraph readability by adding spacing between the lines. There is one type of body.\n\n- **Auxiliary small/mini:** These are secondary elements of an interface, such as subtitles and badge text. There are two types of auxiliary text: small and mini.\n\n- **Action:** This is the text style used in the main action of the page and for interactive elements, such as call to action (CTA), buttons, and tabs. There are three types: `Action`, `Action Small`, and `Action Large`.\n\n- **Code:** This is the text style used to indicate technical terms, such as programming languages, shipping estimates, and installment rules.\n\nFollow the instructions below to configure type tokens:\n\n1. In the VTEX Admin, go to **Storefront > Styles**.\n\n2. Select the kebab menu icon (three dots).\n\n3. Click **Edit > Typography > Type tokens**.\n\n    ![tokens-tipo-giff-en](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/styles/customizing-your-stores-typography_2.gif)\n\n4. Choose the token you want to customize, such as **Heading 1**, and click it.\n\n5. Then customize each property according to the table below:\n\n    | Property | Description | Available values |\n    | ----------- | --------------- | ----------------- |\n    | __Font Family__ | Sets the font type of a type token. | `JosefinSans`, `Bold`, `Default` |\n    | __Font Weight__ | Sets how thick or thin the token characters should be displayed. | `Thin`, `Extra Light`, `Light`, `Normal`, `Medium`, `Semi Bold`, `Bold`, `Extra Bold`, `Black`.   |\n    | __Font Size__ | Sets the font size of a type token. | `48px`, `36px`, `24px`, `20px`, `16px`, `14px`, `12px`, |\n    | __Text Transform__ | Sets the use of capital letters in the type token. | `Initial`, `None`, `Capitalize`, `Uppercase`, `Lowercase`, |\n    | __Letter Spacing__ | Sets the space between characters in a type token. | `Normal`, `Tracked`, `Tracked Tight`, `Tracked Mega`, `Zero` |\n\n6. Click `Save`."}