Quick Tip: How to change the font in any Umbraco theme

How do I change the font used in my chosen Umbraco CMS theme?

uSkinned member

The process is pretty straight forward and is the same in each theme - the only thing that might vary ever so slightly, from theme to theme, is which line numbers the following code can be found on.

For this example, we have used Refresh theme.

 

Step 1.

All of our themes (except Source) use Google Webfonts. You will find the CSS reference for the font here: Login to CMS > Go to Settings > Expand Templates > Open USN Master > Go to line 23

<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>

To use a new font from Google Webfonts visit https://fonts.google.com/ and follow their instructions and then replace the above line with your chosen font. You are not limited to Google Webfonts though and can use any font service (Typekit, Typotheque etc) or even use a system font, such as, Helvetica or Arial.

 

Step 2.

Now you'll need to edit the uSkinned CSS to pick up the correct font - this is required for all themes whether it is a Google Webfont or system font or any other font service.

Login to the CMS > Go to Settings > Expand Stylesheets > Open base > Go lines 338-368

/* --------------------------------------------------
4.0 TYPOGRAPHY
-------------------------------------------------- */

/* --------------------------------------------------
font-family: 'Open Sans'
font-weight: Light 300, Reg 400, Med 500, Bold 700
-------------------------------------------------- */

body {
font-family: 'Open Sans', sans-serif;
font-weight:300;
font-size:16px;

-webkit-font-smoothing: antialiased;
}
input, select, textarea, button {
font-family: 'Open Sans', sans-serif;
font-weight:300;
font-size:16px;
}
button, .btn {
font-weight:300;
letter-spacing:0.025em;
}
h1, h2, h3, h4, h5, h6, .heading, nav.main, table thead th, .nav-tabs {
font-family: 'Open Sans', sans-serif;
font-weight:300;
letter-spacing:-0.025em;
line-height:1.2;
}

Step 2.1.

You should now edit each reference to the font within the CSS.

The first thing we do in our themes is mention what the font-family is and what font-weights are available for that font. We then comment this out as this will only used as a helper guide to anyone editing the CSS.

/* --------------------------------------------------
font-family: 'Open Sans'
font-weight: Light 300, Reg 400, Med 500, Bold 700
-------------------------------------------------- */

Step 2.2.

Now we want to edit the CSS to pick up the correct font in each place it is referenced. Below we will first update the base body font.

body {
font-family: 'Open Sans', sans-serif;
font-weight:300;
font-size:16px;
}

You can then change this to your chosen font.

body {
font-family: 'Helvetica', sans-serif;
font-weight:400;
font-size:14px;

Our theme is now using Helvetica as it's base body font.

You should repeat Step 2.2 for each place the font-family is referenced.

comments powered by Disqus

Get started today

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