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:
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.
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.
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: