The following is an outline of the controls found within a font section. To find the font sections, go to Appearance → Customize and click on the Nova Fonts panel.

Note: If you are unfamiliar with CSS length types as found in various controls such as font-size, padding, or margin, we recommend you stick with “px” which stands for pixel.

CSS Selector

The CSS selector is what allows you to select and style any element on the page. It may seam a bit complex if you have never seen or written any CSS before. Therefore, we have created a handy little page to explain working with CSS selectors in more detail. However, to get started you could just enter one of the following selectors or any combination thereof.

  • body
  • h1, h2, h3, h4, h5, h6

The first selector (body) will apply your font settings to the entire page and the second selector (h1, h2, h3, h4, h5, h6) will target all headings, large to small. Notice the comma between the headings selector? That’s how you can select multiple elements at once.

Note: When it comes to CSS selectors, the order in which fonts are sorted plays a role. Please refer to the documentation about sorting fonts to learn more.

Font Family

The font family field lets you choose fonts for your theme and consists of three dropdown inputs. First you must select your desired font source, e.g. Google. This will cause NovaFonts to reveal the other two fields which are font type (left) and font family (right). By changing either the font type or the font source, NovaFonts also changes what’s available inside the font family field and/or the font type field.

Font Weight

The font weight field lets you change whether your font should appear thinner or thicker. Depending on the value of the font family input, the available weight options will change.

Text Transform

Text transform controls how to capitalize the text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.

Font Style

Font style specifies if a font should be styled italic or normal.

Font Size

Font size controls the size of the font.

Line Height Ratio

The line height ratio is a strictly numeric input and will compute the line height of the font using the following formula: font-size * line-height-ratio. For example, a font size of 10px multiplied by a line height ratio of 1.6 would compute to a line height of 16px.

Letter Spacing

Letter spacing defines the amount of space between each individual character. 

Margin Top & Bottom

Margin defines the spacing around an element.

Padding Top & Bottom

Padding defines the spacing around an element but within it’s own container. At times it’s helpful to be able to address the padding of a text element.

Note: We recommend using margin over padding when possible.