Search Knowledge Base by Keyword

This KB documentation is using Advanced Search, Links Editor and Elegant Layouts add-ons.

Print

Typography – Font Family, Size, Weight

Created OnMay 16, 2021
Updated OnNovember 24, 2024
By:Dave
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
Views787
Important Notice for KB Block Users

If you're using KB Blocks for the KB Main Page, you can easily configure text typography within the block's sidebar settings. Learn More

The rest of this page applies only to:

  • Users utilizing the KB shortcode on the Main Page
  • Article Pages
  • Category Archive Pages

Font Family

Copy the URL link to this section to share

To change the typography font family, follow these steps:

  1. Go to KB Configurations.
  2. Select the Settings tab.
  3. Click on the General -> Settings Tab.
  4. Find the Typography section.

 

Changing this option will apply the selected font family to all Knowledge Base elements.

Custom CSS

To add custom CSS, we recommend using your child theme as the best solution. However, if that option is not available, you can add custom CSS in our custom CSS box.

For more information about using the custom CSS box, click here.

Search Box - Font Size and Weight

Copy the URL link to this section to share

To customize the font size and weight of the Search Box typography, please add the following custom CSS to modify each element

Please refer to the code boxes below and match them with the corresponding numbers on the image.

Click to zoom

Title

1
CSS
				/* Change Font Size and Font Feight */
#epkb-ml__module-categories-articles #epkb-ml__module-search .epkb-ml-search-title {
    font-size: 27px !important;
    font-weight: 500 !important;
}

Input box Placeholder Text

2
CSS
				/* Change Font Size and Font Feight */
#epkb-ml__module-categories-articles #epkb-ml__module-search .epkb-ml-search-box__input {
    font-size: 27px !important;
    font-weight: 500 !important;
}

Search Button

3
CSS
				/* Change Font Size and Font Feight */
#epkb-ml__module-categories-articles #epkb-ml__module-search .epkb-ml-search-box__btn .epkb-ml-search-box__text {
    font-size: 27px !important;
    font-weight: 500 !important;
}

Categories and Articles: Category Box - Font Size and Weight

Copy the URL link to this section to share

To customize the font size and weight of the Category Box typography, please add the following custom CSS to modify each element

Please refer to the code boxes below and match them with the corresponding numbers on the image.

Click to zoom

Top Category Name

1
CSS
				/* Change Font Size and Font Feight */
#epkb-ml__module-categories-articles #epkb-content-container .epkb-cat-name {
    font-size: 27px !important;
    font-weight: 500 !important;
}

Top Category Description

Copy the URL link to this section to share
2
CSS
				/* Change Font Size and Font Feight */
#epkb-ml__module-categories-articles #epkb-content-container .epkb-cat-desc {
    font-size: 27px !important;
    font-weight: 500 !important;
}

Articles

Copy the URL link to this section to share
3
CSS
				/* Change Font Size and Font Feight */
#epkb-ml__module-categories-articles #epkb-content-container .eckb-article-title {
    font-size: 27px !important;
    font-weight: 500 !important;
}

Sub Categories

Copy the URL link to this section to share
4
CSS
				/* Change Font Size and Font Feight */
#epkb-ml__module-categories-articles #epkb-content-container .epkb-category-level-2-3__cat-name {
    font-size: 27px !important;
    font-weight: 500 !important;
}

Featured Articles - Font Size and Weight

Copy the URL link to this section to share

To customize the font size and weight of the featured articles typography, please add the following custom CSS to modify each element

Please refer to the code boxes below and match them with the corresponding numbers on the image.

Click to zoom

Heading

Copy the URL link to this section to share
1
CSS
				/* Change Font Size and Font Feight */
#epkb-ml__module-categories-articles .epkb-ml-articles-list__title {
    font-size: 27px !important;
    font-weight: 500 !important;
}

Article List Heading

Copy the URL link to this section to share
2
CSS
				/* Change Font Size and Font Feight */
#epkb-ml__module-categories-articles .epkb-ml-article-section__head {
    font-size: 27px !important;
    font-weight: 500 !important;
}

Articles

Copy the URL link to this section to share
3
CSS
				/* Change Font Size and Font Feight */
#epkb-ml__module-categories-articles .epkb-ml-articles-list .epkb-article-inner {
    font-size: 27px !important;
    font-weight: 500 !important;
}

Frequently Asked Questions - Font Size and Weight

Copy the URL link to this section to share

To customize the font size and weight of the Frequently Asked Questions typography, please add the following custom CSS to modify each element

Please refer to the code boxes below and match them with the corresponding numbers on the image.

Click to zoom

Heading

Copy the URL link to this section to share
1
CSS
				/* Change Font Size and Font Feight */
#epkb-ml__module-categories-articles .epkb-faqs-container .epkb-faqs-title {
    font-size: 27px !important;
    font-weight: 500 !important;
}

Question

Copy the URL link to this section to share
2
CSS
				/* Change Font Size and Font Feight */
#epkb-ml__module-categories-articles .epkb-faqs-container .epkb-faqs__item__question__text {
    font-size: 27px !important;
    font-weight: 500 !important;
}

Answer

Copy the URL link to this section to share
3
CSS
				/* Change Font Size and Font Feight */
#epkb-ml__module-categories-articles .epkb-faqs-container .epkbs-faqs__item__answer__text {
    font-size: 27px !important;
    font-weight: 500 !important;
}
Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
5
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?
Tags:
Table of Contents

Copyright © 2024 Echo Plugins. All Rights Reserved.