This tutorial has 2 parts:

• Google Fonts
• Selfhosted Fonts

Working with Google fonts

Go to Google Fonts

Choose font, which you like. e.g. Roboto.

Click Quick use. 

Now you can see site where are listed all width, character sets of this font, etc…

Go back to your Theme Options -> Typography Options and fill there font family (e.g. Roboto).

As source choose Google fonts.

Select weight from the list (1), you’ve seen at the Google Font web.

Select size and line height – we recommend to keep something between 1.3 – 1.5em.

In the last item you can choose Websafe font (3). It means, when your font wont loaded (for some reason), there will be used some similar font type.

If you’re using a language which contains special characters, please make sure, that your chosen font support that character set (2). In Theme Options -> Typography Options scroll down and in Character Subsets for Google Fonts section choose your character set.

Working with self-hosted fonts

Please copy your .eot, .ttf and .woff files to /css/custom_styles/ folder.

In this folder  /css/custom_styles/ also create some .css file (e.g. my-styles.css)

Into that file, please put this code:

@font-face {
	font-family: 'my-font';
	src:url('./custom_styles/my-font.eot');
	src:url('./custom_styles/my-font.eot') format('embedded-opentype'),
		url('./custom_styles/my-font.woff') format('woff'),
		url('./custom_styles/my-font.ttf') format('truetype'),
		url('./custom_styles/my-font.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

Next go to Theme Options -> Typography Options And switch source to self-hosted font.

As font-family set my-font