In Typography, you can manage fonts styles and their properties. In Popo Theme, for every page, block, heading, widget, and so on, there is an isolated typography panel which gives you the capacity to control: Font Family, Font Weight, Font Character Set, Text Align, Text Transform, Font Size, Letter Spacing, Font Color.
In theme panel go to Dev → Theme Options → Typography :
There is a button Reset Typography. By clicking it will help you to reset all typography settings which you have change and it will reset to theme defaults typography options which are created by Popo Theme.
As you see in above picture, all aspects of Dev has its own typography. Tap on + to open the accordion menu for each part and roll out your improvements. Choices for each accordion are almost the same. Here we portray what these choices mean also depict how to include and utilize custom font styles.
For example, click on General accordion. You see it has some subsections: Default Body Font, Posts Meta, etc. and every subsection has its own sections: paragraph, heading, divided. But options are the same, just select which part of the theme you want to change. The paragraph is ordinary text, Heading means H1 to H6 tags, and Divided stands for separated characters. We select General Typography → Default Body Font.
What are Typography Options?
1- Font Family: Select a font between nearly 1000+ pre-install fonts in Popo Theme which you can add new fonts to it (later in this article). Dev supports Google Fonts, Google early Access Fonts and also you can add Custom Fonts.
2- Font Variant: The font-weight property sets how thick or thin characters in text should be displayed.
3- Font Character Set: All fonts use a character set. A character set contains punctuation marks, numerals, uppercase and lowercase letters, and all other printable characters. Select this option according to your website language.
4- Text Align: The text-align property specifies the horizontal alignment of text in an element.
5- Text Transform: This property in CSS controls text case and capitalization. For example, select Capitalize to capitalize the first letter of each word.
6- Font Size: The font-size property sets the size of a font.
7- Letter Spacing: This property increases or decreases the space between characters in a text.
8- Line Height: The line-height CSS property sets the amount of space used for lines, such as in text. On block-level elements, it specifies the minimum height of line boxes within the element.
9- Color: Specifies the color of the font.
10- Preview Color: It shows color code what you have selected in 9 options
How to Add a Custom Font?
As soon as you add a custom font, it will add to the font-family list. There are two ways to add a custom font to Dev → Theme Options → Typography → Custom Font :
Add New Custom Font in Typography
A first way is adding it in typography. Follow steps below:
1- Click drop down menu to select Font Family.
Here Select a name for the new font. Now select font files in each field according to their format. Different browsers support different formats.
2- Once you done respective extension support uploaded font then Select Save options.