Neve Typography

This guide covers how fonts work in Neve and where to change them, the font-family, font-size, as well as other typography options.

These options are available in Dashboard > Appearance > Customize > Typography, and are classified as follows:

The font-family can be set in the General panel and will apply all over the website with the possibility to choose a different one for the heading tags. Both fonts, the generic and the headings one, share the same fallback font, option available in the General panel.

Below you can see how the web-page will act inside the browser while loading the fonts. It will first use the fallback font while loading the other ones:


General

The general font applies everywhere on the website, except on items where a different font is specified explicitly, as it can be for the heading tags or any block/widget where the editor used defined its own style

For example, if the block used within a page has a font option, that one should override the theme, same when using a page builder like Elementor. Most of the editors have the option to inherit fonts from the theme options.

The general font is available in Customizer > Typography > General. The following options are also available: 

  • Text Transform -  none | capitalize | lowercase | uppercase.

  • Weight - none| 100 | 200 | ... | 900.

  • Font Size - change the numeric value of the font, which is represented in pixels.
  • Line Height - numeric value, represented in EM, PX, or - ( which means that descendent elements that specify a different font size will inherit that number instead of a fixed line height).

  • Letter Spacing - numeric value, represented in pixels.

Each of these last three options is responsive, they can be set differently on Desktop | Tablet | Mobile, and they can be reset, by clicking on the ↪️ icon.


Headings

The Headings font allows a different font-family than the General one to be set for all the sixth heading tags. For each tag, the following options are available: text-transform, weight, font-size, line-height, letter-spacing. 

📝 Note: The fallback font is common with the General fallback.


Blog 

The blog typography settings apply to the blog/archive page and the single post layout. The font-family and fallback font will be inherited from the General and Headings fonts, however, the other settings such as text-transform, weight, font-size, line-height, letter-spacing can have different values for the following sections.

Blog / Archive page

  • Post title - which is an H2 tag; without setting anything here, values will be inherited from Typography > Headings > H2.
  • Post excerpt - body text; without setting anything here, values will be inherited from Typography > General.
  • Post meta - list item; without setting anything here, values will be inherited from Typography > General.


Single Post

  • Post Title - which is an H1 tag; without setting anything here, values will be inherited from Typography > Headings > H1.
  • Post Meta - list item; without setting anything here, values will be inherited from Typography > General.

  • Comments Reply Title - which is an H3 tag; without setting anything here, values will be inherited from Typography > Headings > H3.


WooCommerce

📝 Note: The options presented in this chapter are available only with the WooCommerce Booster module enabled, and this one is available in Neve Pro Business and Agency.

The WooCommerce typography settings apply to the shop/archive page and the single product layout. The font-family and fallback font will be inherited from the General and Headings fonts, however, the other settings such as text-transform, weight, font-size, line-height, and letter-spacing can have different values for the following sections.

Shop / Products Archive

  • Product title - which is an H2 tag; without setting anything here, values will be inherited from Typography > Headings > H2.
  • Product price - body text; without setting anything here, values will be inherited from Typography > General.


Single Product 

  • Product title - which is an H1 tag; without setting anything here, values will be inherited from Typography > Headings > H2.
  • Product price - body text; without setting anything here, values will be inherited from Typography > General.
  • Product meta - body text; without setting anything here, values will be inherited from Typography > General.
  • Product short description - body text; without setting anything here, values will be inherited from Typography > General.
  • Tab titles - list item; without setting anything here, values will be inherited from Typography > General.


Other

  • Alert notice - div tag; without setting anything here, values will be inherited from Typography > General. It appears after a product has been added to the cart.

  • Sale tag - appears on both the shop page and single product; body text - without setting anything here, values will be inherited from Typography > General.


Dedicated typography options are available for the header / footer menus while editing the component into the header / footer builder. The menus allow the font-family, text-transform, weight, font-size, line-height, letter-spacing properties to be customized, example below.

📝 Note: More information about header / footer builder can be found in this category.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.