Marketplace
Important! This documentation is old, and a lot has changed in HubSpot since we released Act version 1. If you are still using Act version 1 we recommend saving these pages for later reference. This documentation will be deleted soon.

How to change typography

The font styles can sometimes be pretty complex, often requiring adjustments in CSS. This is the reason we have not included any font option in the Customization Tool. Some fonts have smaller or larger characters, others don’t work well with all-caps text-transform: uppercase, have different weight, and more similar reasons.

We also optimized the current font configuration and tested it on all major browsers, from very large screens to small devices (like tablets or mobile phones), from normal monitors to large and small HiDPI displays. This is why we don't recommend making changes to the typography, but only if absolutely necessary.

Important Note:

We strongly don't recommend using the Styles tab and Style menu in the page editor to make changes to the Text Size or Line Height. It will overwrite Act Theme's responsive styles and the text will not scale well on small screens.

As a side note, we don't recommend using the Styles tab to add margin or padding (especially negative margin or left/right margin/padding, in order to align content), because they can affect the responsiveness of your page on various devices. Instead, please try using our helper classes for margin or padding and our recommended method for centering content.

There are two base typefaces in Act: Open Sans (the primary font) and Roboto Condensed (secondary font, mainly used for the base headings). You can open the CSS file in Design Manager and replace the font family names there.

If you purchased Act from the new HubSpot Marketplace, you will notice two variables in the CSS stylesheet: primary_font and secondary_font, so you can easily replace their values (what's between double quotes) with your own font family:

act-theme-typography-variables

If you are familiar with CSS you can also hit Ctrl+F (Cmd+F) to use HubSpot’s Find and Replace tool, so you can search for CSS selectors or styles. Below are all the typography rules used in Act Theme. Please note that we adjusted these fonts according to various screen sizes, for a better readability. Therefore, if you are not going to overwrite them in your media queries, we suggest leaving the font-size and line-height properties untouched (remove them from the code below if you are going to add this at the end of your CSS). You should also know this is the output code, primary_font and secondary_font being replaced with their specified values, in this case: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif and "Roboto Condensed", sans-serif respectively. We also added some CSS comments here, so you can see what everything is:

/* Base text */
body {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1em;
    line-height: 1.6;
}

/* Base headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Roboto Condensed", sans-serif;
    line-height: 1.1;
    font-weight: 300;
}

/* Form buttons */
button,
input[type="submit"],
input[type="button"],
.hs-button.primary {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: normal;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* RSS module headlines */
.hs-rss-title {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 300;
}

/* Base menu modules */
.hs-menu-wrapper ul li a {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
}

/* Top main navigation */
.main-navigation .hs-menu-flow-horizontal ul li a {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Hero header */
.hero-wrapper h1 {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 70px;
    font-weight: bold;
    letter-spacing: -0.05em;
}

/* LP top headlines (as seen here: http://demo.neambo.com/act-lp-simple-i or http://demo.neambo.com/act-lp-complex-i) */
.lp-headlines-section h1 {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 52px;
    font-weight: 300;
}

/* LP top headline (as seen here: http://demo.neambo.com/act-lp-simple-ii) */
.lp-simple-2-headlines-section h1 {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0;
}

/* Act Slider caption headlines (as seen here: http://demo.neambo.com/act-one-column-slider) */
.act-slider .hs_cos_flex-slider .caption h1,
.act-slider .hs_cos_flex-slider .caption h2,
.act-slider .hs_cos_flex-slider .caption h3,
.act-slider .hs_cos_flex-slider .caption h4,
.act-slider .hs_cos_flex-slider .caption h5,
.act-slider .hs_cos_flex-slider .caption h6 {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    text-transform: uppercase;
}

/* Sub menu (as seen here: http://demo.neambo.com/act-two-column-sub-menu) */
.sub-menu .hs-menu-wrapper ul li a {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: normal;
    text-transform: uppercase;
}

/* Emphasis line (example: the long bar before the slider here http://demo.neambo.com/act-lp-complex-i) */
.emphasis-line {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 22px;
    line-height: 40px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
}

/* LP ribbon header (http://demo.neambo.com/act-lp-hero-offer-i) */
.hero-offer-primary-headline h1,
.hero-offer-secondary-headline h2 {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
}

.hero-offer-secondary-headline h2 {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

/* LP hero offer labels (http://demo.neambo.com/act-lp-hero-offer-i) */
.hero-offer-form-box .field > label {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 12px;
    font-weight: normal;
    text-transform: uppercase;
}

/* LP hero offer image box (http://demo.neambo.com/act-lp-hero-offer-i) */
.hero-offer-content-box {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
}

/* Section intro headers (as seen on the homepage: http://demo.neambo.com/act) */
.section-intro h1,
.section-intro h2,
.section-intro h3,
.section-intro h4 {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
}

/* Read more buttons */
.default-button {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.43;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.primary-button {
    font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.2;
    font-weight: bold;
}

/* Blog pagination */
.act-blog-pagination {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 14px;
    text-align: center;
    font-weight: 400;
    text-transform: uppercase;
}

If you are looking to import another webfont in your stylesheet using the @import rule, please make sure you use a secure protocol. Add // or https at the beginning of the file path. Example:

@import url(//fonts.googleapis.com/css?family=PT+Sans);

or:

@import url(https://fonts.googleapis.com/css?family=PT+Sans);

If your file's path is added with http, the browser may interpret that your page contains nonsecure items and the font will not be loaded.