Have you ever needed to update your website font, but weren't sure exactly where to start? Or maybe you just realized the text on your blog is a bit too small, but your designer is out on vacation. Fret not—today's guide will give you a quick rundown on the basic steps you can take to make quick design changes using only your browser and HubSpot.

In this scenario, let’s say we want to set the font-family of the header on our website to Helvetica. We'll be using Chrome DevTools to figure out which CSS classes to target and subsequently apply the changes in HubSpot.

Step 1: Access Chrome DevTools

 


Chrome DevTools is a great tool that allows us to live-edit any page on the internet without making any permanent effects to the site. As such, it's great for identifying which CSS selector to target and to preview the effect of applying specific CSS declarations.

To access Chrome DevTools, right-click on the page and click Inspect (in other browsers, the option may appear differently, such as Inspect Element). You can also use the keyboard shortcut Command + Option + i (Mac) or Control + Shift + i (Windows, Linux, Chrome OS).

Step 2: Select an Element on the Page

 


In the top bar of the DevTools window, click on the first icon from the left to inspect an element on the page (shown above). This allows you to hover over any element on the page and zoom into HTML and CSS that’s being applied. Since we’re looking to change the font family of the header, we’ll want to hover over the header element of the page as shown in the gif below: 

 

Step 3: Identify Which CSS Class to Target in Your Page Stylesheet

After inspecting the header, we can see the styling that is being applied in the right sidebar. In this case, the relevant CSS class is .post-header-content h1 (shown below).


But how do we know if it’s the correct class? We can confirm this by using the checkboxes next to the CSS rules in the sidebar. Those checkboxes allow us to toggle the rule and see what the page would look like without the rule. If we uncheck the CSS declarations under .post-header-content h1, we can see that the header style changes and this helps to confirm that this is the class affecting the header. See this in action below:

 
We can even test out what our Helvetica font will look like in the header before making any changes to the stylesheet. To do this, add a font-family rule into that sidebar underneath the .post-header-content h1 declaration. Shown in the gif below, the full rule to add will be:

font-family: Helvetica;

 

Step 4: Identity Which Stylesheet to Update

Now that we’ve figured out which CSS class to target, we need to find which stylesheet to update. The stylesheet can be found to the right of the CSS classes in the styles tab. In this example, the stylesheet would be aplite_stylecopy (shown below).
 

If you are inspecting a HubSpot hosted page that has more than one stylesheet applied, you might see a combined stylesheet instead (combined-css-xxx). This is because HubSpot automatically combines CSS files to optimize page load time. To get around this, you can add ?hsDebug=True at the end of the website URL in the browser and then refresh the page—this will reload the page with the stylesheet names separated out in the inspector.

 

(Note: The CSS rules that have a strikethrough are those overwritten by higher priority properties that are more specific. A trick to bump up the priority of your applied styling is by adding an !important tag to the CSS declaration.)

Step 5: Make the Changes to Your HubSpot Hosted Pages

Once you know which CSS class and stylesheet to target, we can go ahead and make the necessary changes in HubSpot. Of course, if your website isn't hosted on HubSpot, you would need to make the changes in your website hosting platform instead (such as WordPress, Squarespace, etc).

A quick way to locate the attached stylesheet in HubSpot is by navigating to the page editor for that page, and then clicking the Settings tab followed by Advanced Options. Under the Stylesheets section, click on the name of the stylesheet to open it in the design manager. For more information on this, you can refer to the following Knowledge Base article for a step-by-step guide: How can I find and edit the stylesheet applied to my page?

 


Once you are in the stylesheet, search for the class (.post-header-content h1) by using the keyboard shortcut Command + F (Mac) or Control + F (Windows, Linux, Chrome OS) and add in the CSS declaration: font-family: Helvetica;

Step 6: Remember to Hit Publish


To take the changes live, remember to hit the orange button at the top-right to publish your stylesheet. Once you refresh your live page, you should see those changes applied.

Conclusion

While this isn’t meant to be a comprehensive guide for troubleshooting design cases, and complicated custom design questions would still best be handled by a dedicated designer, these are the general steps that you can take whenever to make simple changes or at least troubleshoot a design issue. Start trying these steps out today and you might realize that you don’t always need your designer when making simple changes to your website.

Looking for more design help? Check out the articles below:

Mastering Media Queries
How to Add Your Branding to a Marketplace Template

Start the free HubSpot Design Certification course from HubSpot Academy.

Originally published Oct 15, 2018 11:00:00 AM, updated October 15 2018