If you want to use custom fonts, you will need to disable the Google Fonts. Navigate to Dashboard > Ekko > Theme Options > Typography and simply select a default system font like Arial, Helvetica, sans-serif.

Then follow the steps below to install a custom web font:

1. Create a “fonts” folder

Within your child theme create a new “fonts” folder under: wp-content/themes/ekko/fonts/

2. Upload the font files to this folder

This can be done through the control panel of your hosting, via FTP or using the File Manager plugin. The required file formats are: Webfont.eot, Webfont.woff, Webfont.ttf and Webfont.svg.

You can generate the required files using the Font Squirrel Font generator.

3. Import the fonts

Once you have uploaded the font you’ll need to call on it so you can use it, via a snippet that should look like this:

@font-face{
font-family: 'CustomWebfont';
src: url('fonts/Webfont.eot');
src: url('fonts/Webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/Webfont.woff') format('woff'),
url('fonts/Webfont.ttf') format('truetype'),
url('fonts/Webfont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

You can add this code with the Theme Options > Custom CSS area. Don’t forget to replace the font-family and URL with your own.

Once you’ve entered this code, don’t close Custom CSS page just yet. You still need to configure which elements will use the new font:

Body font:

body { font-family: "CustomWebfont", sans-serif; }

Navigation font:

.navbar-default .nav li a, .modal-menu-item { font-family: "CustomWebfont", sans-serif; }

Heading font:

h1, h2, h3, h4, h5, h6 { font-family: "CustomWebfont", sans-serif; }