Changing the fonts on your Katana site

ADVANCED GUIDE: FOR WEB DESIGNERS AND DEVELOPERS

This article contains all the CSS classes you need to change the primary fonts on a Katana site. You will need the intended fonts linked to in your Custom Header Code, found in your site's backend under Settings > Custom Code.

If you would like this done for you, please contact our designers at info@realtyninja.com and let us know the specific font you would like it changed to from Adobe or Google Fonts.

.header1, .header2, .header3, .header4, .header5, h1, h2, h3, h4, h5, .recent-blog-entry-date, .header-contact-details, .navbar-default .navbar-nav>li>a, .hero-carousel .carousel-caption h1, .section-heading h3, .listing-main-info h1, .blog-header-title-section .blog-entry-info, .blog-header-title-section h1, .blog-overview-wrapper, .blog-overview-wrapper h2, body, .big-contact-form-wrapper, .small-contact-info-wrapper, .hero-carousel .carousel-caption .btn, .building-main-info-listings-count, .listing-detail-info-list-container, .listing-grid, .listing-list, .listing-main-info-price, .listing-secondary-info, .mls-search-controls-wrapper, .mls-search-controls-wrapper label, .search-results-table-view-wrapper, #footer-disclaimer, .recent-blog-entry-text, .blog-post-content .header1, .blog-post-content .header2, .blog-post-content .header3, .blog-post-content .header4, .blog-post-content .header5, .blog-post-content h1, .blog-post-content h2, .blog-post-content h3, .blog-post-content h4, .blog-post-content h5, .blog-header-title-section .blog-entry-info, .blog-post-content, .blog-overview-wrapper, .blog-overview-wrapper h2, .mls-search-controls-wrapper .form-control {
  font-family: Montserrat,Helvetica,Arial,sans-serif; 
}

If you are using different fonts for titles and body copy, here they are separated:

/* Title Fonts: */ 

.header1, .header2, .header3, .header4, .header5, h1, h2, h3, h4, h5, .recent-blog-entry-date, .header-contact-details, .navbar-default .navbar-nav>li>a, .hero-carousel .carousel-caption h1, .section-heading h3, .listing-main-info h1, .blog-header-title-section .blog-entry-info, .blog-header-title-section h1, .blog-overview-wrapper, .blog-overview-wrapper h2 {
  font-family: Raleway,Helvetica,Arial,sans-serif; 
}

/* Body Fonts: */  

body, .big-contact-form-wrapper, .small-contact-info-wrapper, .hero-carousel .carousel-caption .btn, .building-main-info-listings-count, .listing-detail-info-list-container, .listing-grid, .listing-list, .listing-main-info-price, .listing-secondary-info, .mls-search-controls-wrapper, .mls-search-controls-wrapper label, .search-results-table-view-wrapper, #footer-disclaimer, .recent-blog-entry-text, .blog-post-content .header1, .blog-post-content .header2, .blog-post-content .header3, .blog-post-content .header4, .blog-post-content .header5, .blog-post-content h1, .blog-post-content h2, .blog-post-content h3, .blog-post-content h4, .blog-post-content h5, .blog-header-title-section .blog-entry-info, .blog-post-content, .blog-overview-wrapper, .blog-overview-wrapper h2, .mls-search-controls-wrapper .form-control {
  font-family: Montserrat,Helvetica,Arial,sans-serif; 
}

Want your site professionally designed to match your branding or style? Let us create a semi-custom or fully custom design for you! More information here https://www.realtyninja.com/designs

Still need help? Contact Us Contact Us