In this section you are shown how to add fonts and how to add a range of font properties for use across your website to meet your typographic needs.

▶  

Import fonts

You will need to import fonts before you can begin to explore how to work with the font options. With Uncode, you can import fonts from Google Fonts, Typekit, Fontdeck, or Font Squirrel, and import custom web fonts and system fonts as well.
To import a font family, go to Uncode > Fonts and click the "+" to add the font (remember to save the option page). The selected font is now available for use in your installation, screenshot.

Custom fonts

With Custom fonts, you can create dynamic font family stacks to use with Uncode:

1. Click the ADD NEW button.
2. Add a name for your font.
3. The unique font ID field can be ignored (this value is created automatically and it should not be edited unless you have specific reason to change).
4. Select your predefined Uncode font family, screenshot

Default Font Size and Large Text

Define the default font size for p,li,dt,dd,dl,address,label,small,pre in px. The Large Text is an option used by the Posts, Media Gallery, Heading and Text modules to make a paragraph stand out (it's suggested to use a larger size then the Default Font Size).

Font size H1 to H6

This entry creates dynamic font sizes for the basic text and the general typographic HTML headings (h1-h6). Simply insert the desired font size. Values are in pixels. Simply enter a number such as 35, 26…

Custom font sizes

This entry is used to create any additional font sizes for use in headers, in Uncode WPBakery Page Builder modules, and layout creations.

To add a new custom font size:

1. Click the ADD NEW button.
2. Add a name for your font size, for example, 'Font-size 25'.
3. The unique font size ID field can be disregarded.
4. Specify your custom font size in pixels, for example, '25'.

Custom line height

To define the font line heights you will need:

1. Click the ADD NEW button.
2. Add a name for the custom line height.
3. The unique line height ID field can be disregarded.
4. Specify your custom line height.

Custom letter spacing

This area defines the letter spacing, you want. Spacing sizes are specified in ’em’ units:

1. Click the ADD NEW button.
2. Enter the name of Name your custom letter spacing.
3. The unique letter spacing ID field can be omitted.
4. Specify your custom letter spacing size.

Custom Web Fonts

If you want to use a web font that is not included in our Font System, follow these steps to include it in the theme:

1. Make sure you have installed the Uncode Child theme.
2. Copy the folder/folders that contain the web font inside the Uncode Child theme.
3. Copy the font author’s CSS, and paste it inside the style.css of the theme child, it should look something like the following code example.
4. Create a new item inside the Theme Options → Typography → Custom Fonts.
5. Set ‘Manually Entered’ and insert the font name as it is in your CSS font-family property; for example: ‘MyWebFont’.

@font-face{
font-family: 'MyWebFont';
src: url('folder/WebFont.eot');
src: url('folder/WebFont.eot?#iefix') format('embedded-opentype'),
url('folder/WebFont.woff') format('woff'),
url('folder/WebFont.ttf') format('truetype'),
url('folder/WebFont.svg#webfont') format('svg');
}