How to add or edit Fonts to your Theme Design

uSkinned Site Builder comes with Google Fonts integration out of the box. This means you can choose from over 1,000 fonts that will help you make a unique, on-brand website design.

 

Step 1

Login to the CMS.

Step 2

In the tree menu on the left-hand side, go to 'Designs'.

Step 3

Click on the 'Design' you wish to use. Or, create a new 'Design'.

Step 4

Go to the 'Fonts' tab.

Add any font to Umbraco website.

You'll note this is split into two main parts, first 'Fonts' then second, 'Typography'. 

Fonts — This is where you set the fonts you wish to use throughout your design. For instance, you could choose the 'Montserrat' font from Google Fonts. Once that is selected the choose the 'Font Style' from the dropdown and finally the 'Font Weight' available for this particular font from the dropdown. 

Typography — This where you use the 'Fonts' you added above and specify where to use each in your design. For instance, the 'Fonts' added will now appear in the 'Font' dropdown next to each selector when you open them up. You can then select 'Line height', 'Letter spacing', 'Text transform', and the 'Font size' at five breakpoints. 

Step 5

Add as many or as few (at least) fonts to your 'Fonts' section. Use the delete icon to remove an existing font and the plus icon to add more.

Font selection and preview in Umbraco.

Step 6

Under 'Typography' set the font for each selector e.g. 'Body', 'H1', etc.

Typography selectors and settings in Umbraco.

Step 7

Once you're happy hit 'Save and publish'.

 

Well done #h5yr! 

Step 1

Login to the CMS.

Step 2

Go to any page in the tree menu. For example, click on the 'Home' page.

Step 3

In the bottom right, click 'Save and Preview'. Preview mode will now load in a new tab or window. 

Step 4

On the right-hand side, you will see two buttons. One with a Paint Bucket icon and the other a Pencil icon. Click on the 'Paint Bucket' icon to access the Visual Designer.

Step 5

In the slide-out panel, go to the 'Fonts' tab.

You'll note this is split into two main parts, first 'Fonts' then second, 'Typography'. 

Fonts — This is where you set the fonts you wish to use throughout your design. For instance, you could choose the 'Montserrat' font from Google Fonts. Once that is selected the choose the 'Font Style' from the dropdown and finally the 'Font Weight' available for this particular font from the dropdown. 

Typography — This where you use the 'Fonts' you added above and specify where to use each in your design. For instance, the 'Fonts' added will now appear in the 'Font' dropdown next to each selector when you open them up. You can then select 'Line height', 'Letter spacing', 'Text transform', and the 'Font size' at five breakpoints. 

Control fonts with the Visual Designer in Umbraco CMS.

Step 6

Add as many or as few (at least) fonts to your 'Fonts' section. Use the delete icon to remove an existing font and the plus icon to add more.

Step 7

Under 'Typography' set the font for each selector e.g. 'Body', 'H1', etc.

Step 8

Once you're happy hit 'Save and publish'.

 

Well done #h5yr! 

Get started today

Join thousands of agencies, freelancers, enterprises & start ups worldwide who use uSkinned Site Builder for Umbraco to deliver results.

Award Winning!

uSkinned Site Builder for Umbraco CMS just won an Umbraco Award.