Print

Typography – Font Family, Size, Weight

Created OnMay 16, 2021
Updated OnSeptember 5, 2024
By:Dave
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
Views554

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.