Headings typography

Customize all fonts for the whole site at once using the options for typography

The Typography/Fonts section contains the typography settings for each of the textual element used on the site.

Fonts styling settings can be used outside the Typography options, e.g. in Default Button options, etc. They provide you with full control over the font styles.

Headings typography
It allows you to adjust typography settings for the headings used on the site.


  • Font Family – select the font family from the drop-down list. Here you may find the Custom fonts that can be added in Theme options Custom fonts section.
  • Font Weight & Style – select the font weight and style (bold, italic) from the list.
  • Font Subsets – select whether you need to use special characters on the site. The subsets depend on the font you select – there can be Latin Extended, Cyrillic, Greek, etc..
  • Text Transform – set the font decoration and transformation, if needed (e.g.: uppercase, capitalize, etc.).
  • Font size – set the font size you need to use in the certain text element.
  • Line Height – set the line height for text elements to create needed effect. This will be the height of the single text string.
  • Letter spacing – set the needed distance between letters.
  • Font Color – set the color of the font.

The typography settings are identical for each typography item, so below you will find the detailed description for each typography item and where it is used throughout the site.

  • H1 Typography – H6 Typography – style the H1-H6 titles on the site. You may use H1-H6 H5tag in Visual Composer modules.
  • Content title big Typography – set the typography settings and color for the big title. The big title is used in the majority of modules as a title by default.
    • Check the list of the modules with the Content title big used below:
      • New Share module
      • Piechart
      • Team Member
      • Info Background
      • Testimonials
      • Tilted Info
      • Heading
      • Pricing Table
      • Info Banner
      • Product category
      • Animated heading
      • Services
      • Call to Action
      • Milestone
      • Client Logo
      • Twitter
      • Facts
      • Gradation
      • Info Box
  • Content title small Typography – the typography settings and color for the small title. The Small title is used in modules as content elements by default. This element will also change the typography of sort panel titles.
    • Check the list of the modules with the Content title small used below:
      • Heading
      • Delimiter
      • Icon List
      • Pricing Table
  • Content subtitle Typography – select the typography settings and color for the content subtitle. The Content subtitle is used in modules as subtitle elements by default.
  • Form heading Typography – adjust the typography settings and color for the form heading. This heading is related to the comments notification (or to the “Leave a Reply” section if the item was not commented) under the post, portfolio or gallery items.
div#stuning-header .dfd-stuning-header-bg-container {background-image: url(https://nativewptheme.net/support/wp-content/uploads/2017/01/hands1.jpg);background-size: cover;background-position: center center;background-attachment: initial;background-repeat: no-repeat;}#stuning-header div.page-title-inner {min-height: 550px;}#main-content .dfd-content-wrap {margin: 0px;} #main-content .dfd-content-wrap > article {padding: 0px;}@media only screen and (min-width: 1101px) {#layout.dfd-portfolio-loop > .row.full-width > .blog-section.no-sidebars,#layout.dfd-gallery-loop > .row.full-width > .blog-section.no-sidebars {padding: 0 0px;}#layout.dfd-portfolio-loop > .row.full-width > .blog-section.no-sidebars > #main-content > .dfd-content-wrap:first-child,#layout.dfd-gallery-loop > .row.full-width > .blog-section.no-sidebars > #main-content > .dfd-content-wrap:first-child {border-top: 0px solid transparent; border-bottom: 0px solid transparent;}#layout.dfd-portfolio-loop > .row.full-width #right-sidebar,#layout.dfd-gallery-loop > .row.full-width #right-sidebar {padding-top: 0px;padding-bottom: 0px;}#layout.dfd-portfolio-loop > .row.full-width > .blog-section.no-sidebars .sort-panel,#layout.dfd-gallery-loop > .row.full-width > .blog-section.no-sidebars .sort-panel {margin-left: -0px;margin-right: -0px;}}#layout .dfd-content-wrap.layout-side-image,#layout > .row.full-width .dfd-content-wrap.layout-side-image {margin-left: 0;margin-right: 0;}