Basic place, where to add your custom CSS is Theme Options > Custom Stylesheets > Custom CSS. You can add here your custom CSS, and also LESS code. After save Theme Options, these styles will be generated with another theme settings into /css/themeoptions-X.css. (X is a number of site when you’re using WordPress as multisite. Default is “1”).

Theme Options > Custom Stylesheets > Custom CSS

Underneath these options are three inputs used for responsive styles.

• Theme Options > Custom Stylesheets > Custom CSS for desktop (992 – ∞px) – Styles inserted in this section will be used only on devices with screen wider than 992px
• Theme Options > Custom Stylesheets > Custom CSS for tablet (768 – 991px) – Styles inserted in this section will be used only on devices with screen wider than 768px and thinner that 992px
• Theme Options > Custom Stylesheets > Custom CSS for phones (0 – 767px) – Styles inserted in this section will be used only on devices with screen  less than 767px

This section is also compiled into /css/themeoptions-X.css file.

Theme Options > Custom Stylesheets > Custom CSS for …

The last way how to add custom stylesheets is via file. This option is suitable, when you have a lot of custom code. You can add your .css or .less file into /css/custom_styles/ folder. Make sure that you have already changed .css extension to .less! All code contained in your .less files will be generated also into /css/themeoptions-X.css file. You have to just re-save Theme Options. If you want to use @import in your .less file or you want to link a new font, please make sure that you’ll use ./custom_styles/ folder in path.

/css/custom_styles/

1. Copy your font files (.ttf, .eot, .woff, .svg) into /css/custom_styles/ folder.
2. Now you have to link them. You can link it in Theme Options > Custom Stylesheets > Custom CSS or in custom .less file in /css/custom_styles/ folder. It’s up to you.
3. Insert there this code:

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

4. In Theme Options > Typography Options > use Font Family as NAME_OF_YOUR_FONT.