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.

.section-heading h3, .header1, .header2, .header3, .header4, .header5, h1, h2, h3, h4, h5, .recent-blog-entry-date, #rn-98132, .header-contact-details, .navbar-default .navbar-nav>li>a, .hero-carousel .carousel-caption h1, h1, h2, h3, h4, h5, .header1, .header2, .header3, .header4, .header5, .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  {
     font-family: Helvetica, Arial, sans-serif; 
}

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

/* Title Fonts: */ 

.section-heading h3, .header1, .header2, .header3, .header4, .header5, h1, h2, h3, h4, h5, .recent-blog-entry-date, #rn-98132, .header-contact-details, .navbar-default .navbar-nav>li>a, .hero-carousel .carousel-caption h1, h1, h2, h3, h4, h5, .header1, .header2, .header3, .header4, .header5, .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: 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  {
     font-family: 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