Try ShortPoint nowShortPoint Theme Builder allows you to change the font and typography of different areas of your SharePoint site. This article will demonstrate how to do so and list all the options you can customize.
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
Interactive Tutorial
Start the interactive tutorial to learn how to customize the fonts and typography of your site:
NOTEIf the font you want to use is not yet in the pre-determined list of fonts, check out Custom Fonts. For the complete list of the options you can modify, go to Fonts & Typography Features.
Step-by-step Tutorial
Follow the detailed guide below to learn how to customize the fonts and typography of your site:
Step 1: Open Theme Builder
- Go to the SharePoint page you want to use and click the ShortPoint icon:
- Select Theme Builder.
Step 2: Go to Fonts & Typography
- Click Fonts & Typography.
- Select the part of the page where you want the font changed.
Step 3: Customize the Fonts & Typography
- Modify the Fonts & Typography according to your preferences.
- If you want to change the font of other page areas, click Back:
- Then, repeat the steps.
NOTEIf the font you want to use is not yet in the pre-determined list of fonts, check out Custom Fonts. For the complete list of the options you can modify, go to Fonts & Typography Features.
Step 4: Publish
- Publish your changes.
Awesome! You can now change your SharePoint site’s fonts and typography.
Fonts & Typography Features
Below are the various options that can be tweaked in Fonts & Typography:
BASE
The Base section allows you to set the base font for all elements on Modern Pages. It's a global option that will change the fonts for everything, including navigation elements, the header, the content area, web parts, and so on.
Under it, you have the option to change the general font of your site collection:
 | Font | allows you to choose a base font from a list of pre-determined fonts. You can also add your own. Check out Custom Fonts to learn how. |
MENUS
The Menus section allows you to set the font for the different menus in SharePoint.
Below are the menus you can customize:
Primary Menu
This is the main navigation element of the page, located in the header. On Modern Team Sites, it is located at the top of the page title and logo:
While on Communication sites, it is located under the page title:
Check out the table below to see the options you can modify.
 | Font | allows you to choose a font for the Primary Menu from a list of pre-determined fonts. You can also add your own. Check out Custom Fonts to learn how. |
 | Font Style | allows you to choose the style of the font. You can use underline, strikethrough, Italic, and All Capitals. |
 | Text Size | allows you to modify the size of the text in px or em. |
 | Line Height | allows you to adjust the line height. |
 | Letter Spacing | allows you to customize the spaces between each letter. |
 | Color | allows you to modify the font color. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
 | Text Active/Hover Color | allows you to choose the color of the active text. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
Hub Menu
Hub Menu is the hub-associated navigation element. It's located at the top of the header.
 | Font | allows you to choose a font for the Hub Menu from a list of pre-determined fonts. You can also add your own. Check out Custom Fonts to learn how. |
 | Font Style | allows you to choose the style of the font. You can use underline, strikethrough, Italic, and All Capitals. |
 | Text Size | allows you to modify the size of the text in px or em. |
 | Line Height | allows you to adjust the line height. |
 | Letter Spacing | allows you to customize the spaces between each letter. |
 | Color | allows you to modify the font color. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
 | Text Active/Hover Color | allows you to choose the color of the active text. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
Sub Menu
Sub Menu are the items that show up when you hover over navigation menu items. The configuration will be applied to both the hub navigation menu and the site navigation menu.
 | Font | allows you to choose a font for the Sub Menu from a list of pre-determined fonts. You can also add your own. Check out Custom Fonts to learn how. |
 | Font Style | allows you to choose the style of the font. You can use underline, strikethrough, Italic, and All Capitals. |
 | Text Size | allows you to modify the size of the text in px or em. |
 | Line Height | allows you to adjust the line height. |
 | Letter Spacing | allows you to customize the spaces between each letter. |
 | Color | allows you to modify the font color. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
 | Text Active/Hover Color | allows you to choose the color of the active text. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
Mega Menu
Mega Menu is an expanded sub-menu with headers and items under it. You can configure the font of the header and the items in it.
Below are the components of the Mega Menu you can Modify:
- Headers - allows you to change the font and typography of the Mega Menu header. It has the following options:
 | Font | allows you to choose a font for the header. You can also add your own. Check out Custom Fonts to learn how. |
 | Font Style | allows you to choose the style of the font. You can use underline, strikethrough, Italic, and All Capitals. |
 | Text Size | allows you to modify the size of the text in px or em. |
 | Line Height | allows you to adjust the line height. |
 | Letter Spacing | allows you to customize the spaces between each letter. |
 | Color | allows you to modify the font color. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
 | Text Active/Hover Color | allows you to choose the color of the active text. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
- Items - allows you to change the font and typography of the Mega Menu items. It has the following options:
 | Font | allows you to choose a font for the items. You can also add your own. Check out Custom Fonts to learn how. |
 | Font Style | allows you to choose the style of the font. You can use underline, strikethrough, Italic, and All Capitals. |
 | Text Size | allows you to modify the size of the text in px or em. |
 | Line Height | allows you to adjust the line height. |
 | Letter Spacing | allows you to customize the spaces between each letter. |
 | Color | allows you to modify the font color. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
 | Text Active/Hover Color | allows you to choose the color of the active text. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
Side Menu
Side Menu is the side navigation for Team Sites. Here are the options you can modify:
 | Font | allows you to choose a font for the Side Menu from a list of pre-determined fonts. You can also add your own. Check out Custom Fonts to learn how. |
 | Font Style | allows you to choose the style of the font. You can use underline, strikethrough, Italic, and All Capitals. |
 | Text Size | allows you to modify the size of the text in px or em. |
 | Line Height | allows you to adjust the line height. |
 | Letter Spacing | allows you to customize the spaces between each letter. |
 | Color | allows you to modify the font color. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
 | Text Active/Hover Color | allows you to choose the color of the active text. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
Side Sub Menu
Side Sub Menu is the section under each item in the sidebar.
 | Font | allows you to choose a font for the Side Sub Menu from a list of pre-determined fonts. You can also add your own. Check out Custom Fonts to learn how. |
 | Font Style | allows you to choose the style of the font. You can use underline, strikethrough, Italic, and All Capitals. |
 | Text Size | allows you to modify the size of the text in px or em. |
 | Line Height | allows you to adjust the line height. |
 | Letter Spacing | allows you to customize the spaces between each letter. |
 | Color | allows you to modify the font color. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
 | Text Active/Hover Color | allows you to choose the color of the active text. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
BODY
The Body section will affect all elements under the Header. From the body section, you can set the following options:
 | Advanced Text Colors | provides more color customizations for the body’s text. |
 | Font | allows you to choose a font for the body from a list of pre-determined fonts. You can also add your own. Check out Custom Fonts to learn how. |
 | Color | allows you to modify the font color. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
 | Link Color | allows you to change the text color of the links in the body. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
 | Link Hover Color | allows you to customize the text color of the links when a user hovers over it. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
 | Link Visited Color | allows you to customize the text color of the links when a user clicks it. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
 | Article Captions | allows you to modify the text color of article captions. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
HEADINGS
The Headings section allows you to set the font of all the headings in your site, overwriting parent rules. The affected HTML elements are H1, H2, H3, H4, H5, and H6.
 | Font | allows you to choose a heading font from a list of pre-determined fonts. You can also add your own. Check out Custom Fonts to learn how. |
 | Line Height | allows you to adjust the line height. |
 | Letter Spacing | allows you to customize the spaces between each letter. |
 | Color | allows you to modify the font color. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
ADVANCED HEADINGS
The Advanced Headings section allows you to individually customize the font for all the H1, H2, H3, H4, H5, and H6 elements, respectively.
All heading options have these options:
 | Font | allows you to choose a font for the heading from a list of pre-determined fonts. You can also add your own. Check out Custom Fonts to learn how. |
 | Font Style | allows you to choose the style of the font. You can use underline, strikethrough, Italic, and All Capitals. |
 | Text Size | allows you to modify the size of the text in px or em. |
 | Line Height | allows you to adjust the line height. |
 | Letter Spacing | allows you to customize the spaces between each letter. |
 | Color | allows you to modify the font color. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
 | Link Color | allows you to change the text color of the links in your heading. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
 | Link Hover Color | allows you to customize the text color of the links when a user hovers over them. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
 | Link Visited Color | allows you to customize the text color of the links when a user clicks it. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
SITE TITLE
The Site Title section allows you to modify the title and the subtitle of the site.
- Site Title Options
 | Font | allows you to choose a font for the site title from a list of pre-determined fonts. You can also add your own. Check out Custom Fonts to learn how. |
 | Font Style | allows you to choose the style of the font. You can use underline, strikethrough, Italic, and All Capitals. |
 | Text Size | allows you to modify the size of the text in px or em. |
 | Line Height | allows you to adjust the line height. |
 | Letter Spacing | allows you to customize the spaces between each letter. |
 | Color | allows you to modify the font color. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
- Site Subtitle
 | Font | allows you to choose a font for the site subtitle from a list of pre-determined fonts. You can also add your own. Check out Custom Fonts to learn how. |
 | Font Style | allows you to choose the style of the font. You can use underline, strikethrough, Italic, and All Capitals. |
 | Text Size | allows you to modify the size of the text in px or em. |
 | Line Height | allows you to adjust the line height. |
 | Letter Spacing | allows you to customize the spaces between each letter. |
 | Color | allows you to modify the font color. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
PAGE TITLE AREA
The Page Title Area section contains information about the page you're currently located on, such as the name, the author, and the published date.
It has the following options for each area:
 | Font | allows you to choose a font for the selected title area (Page Title, Text Above Page Title, Page Author, or Page Date Published) from a list of pre-determined fonts. You can also add your own. Check out Custom Fonts to learn how. |
 | Font Style | allows you to choose the style of the font. You can use underline, strikethrough, Italic, and All Capitals. |
 | Text Size | allows you to modify the size of the text in px or em. |
 | Line Height | allows you to adjust the line height. |
 | Letter Spacing | allows you to customize the spaces between each letter. |
 | Color | allows you to modify the font color. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
WEB PARTS
The Web Parts section allows you to customize the fonts & typography of the SharePoint web parts on your page. You can individually modify the web part's title and web part's description.
Both have the following options:
 | Font | allows you to choose a font for the selected web part area (title or description) from a list of pre-determined fonts. You can also add your own. Check out Custom Fonts to learn how. |
 | Font Style | allows you to choose the style of the font. You can use underline, strikethrough, Italic, and All Capitals. |
 | Text Size | allows you to modify the size of the text in px or em. |
 | Line Height | allows you to adjust the line height. |
 | Letter Spacing | allows you to customize the spaces between each letter. |
 | Color | allows you to modify the font color. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
LINKS
The Link section will affect all the links in your page.
Below are the options you can modify:
 | Link Color | allows you to change the text color of the links in your page. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
 | Link Hover Color | allows you to customize the text color of the links when a user hovers over them. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
 | Link Visited Color | allows you to customize the text color of the links when a user clicks it. You can choose from a list of pre-determined colors or write your own HEX code in the field provided. |
FOOTER
The Footer section will affect the fonts and typography of all elements located in the footer.
Below is the option you can modify:
 | Font | allows you to choose a font for the footer from a list of pre-determined fonts. You can also add your own. Check out Custom Fonts to learn how. |
Related articles:
