How to implement my own (commercial) fonts into the theme?

First of all, if you want to use other Google Font – you can set it up without any coding job done – just see options at Theme Options > Typography tab. But if you want to use your own font files, proceed reading.

In order to replace fonts you have to do following simple steps:

  1. Upload and activate child theme if you haven't done it previously.
  2. Generate your font files for WEB, we recommend to use this Webfont Generator.
  3. Upload generated font files to /fonts/ subfolder inside child theme’s folder
  4. Add font family declaration for each font to child theme’s style.css file:
    @font-face { 
        font-family: 'Your_Wanted_Font';
        src: url('fonts/Your_Wanted_Font.eot');
        src: url('fonts/Your_Wanted_Font.eot?#iefix') format('embedded-opentype'),
             url('fonts/Your_Wanted_Font.woff') format('woff'),
             url('fonts/Your_Wanted_Font.ttf') format('truetype'),
             url('fonts/Your_Wanted_Font.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    and change Your_Wanted_Font name to your font’s name and filename.
  5. If you want to change font family for Regular Text:
    • set any web-safe font combination for Regular Text at Theme Options > Typography (screenshot)
    • add following CSS code to child theme’s style.css file:
      /* Regular Text Font Family */
      body {
          font-family: 'Your_Wanted_Font' !important;
      and change Your_Wanted_Font name to your font’s name.
  6. If you want to change font family for Headings:
    • disable Google Fonts for Headings at Theme Options > Typography (screenshot)
    • add following CSS code to child theme’s style.css file:
      /* Headings Font Family */
      h1, h2, h3, h4, h5, h6,
      .w-tabs-item-title {
          font-family: 'Your_Wanted_Font' !important;
      and change Your_Wanted_Font name to your font’s name.
  7. If you want to change font family for Main Menu:
    • disable Google Fonts for Main Menu Text at Theme Options > Typography (screenshot)
    • add following CSS code to child theme’s style.css file:
      /* Main Menu Font Family */
      .l-header .w-nav-item {
          font-family: 'Your_Wanted_Font' !important;
      and change Your_Wanted_Font name to your font’s name.


Where do I find the image ID?

Note: Image ID is only required with the several shortcodes. You do not need to use Image IDs if you use Visual Composer instead of shortcodes.

Step 1: Navigate to Media and click on any image:


Step 2: At browser address bar you will find the image ID:



What image size fits better to make sharp logo on all devices?

We recommend to upload original logo image twice bigger than it will appear on site, for example, if you set “50px” value for logo height - original image should be 100px by height.


Is it possible to set different logos for different languages using WPML?

  1. Make sure you have latest version of WPML plugin installed.
  2. Install 'WPML String Translation' plugin from WPML official page.
  3. Navigate to WPML > Theme and plugins localization select "Translate the theme and plugins using WPML's String Translation" option and click on Save button.
  4. Scroll the page a bit down and click on 'Scan the theme for strings' button.
  5. Having done scanning navigate to WPML > String Translation, scroll the page down, click on 'Translate texts in admin screens' link, scroll the page to find expandable list called '+ usof_options_Impreza' click on it, find 'logo_image' field and check corresponding box, scroll the page down and click on 'Apply' button.
  6. Having done that, navigate to WPML > String Translation, find Name 'logo_image' click on 'translations' link:
    In opened window change image ID and click on 'Save' button:
  7. That's it, now you have different logo for another language.


Why are Video Backgrounds doesn't work on mobiles?

We made such behavior to improve performance on mobile devices, you can set screenshot of your video as Background Image, it will be shown instead of video on small screens.


How can I get rid of the gap between a header and a slider?

You should select “No Paddings” value of “Row Height” option at Row Settings:1585.jpg


How to add a custom script between <head></head> tags?

You should install Child Theme and append following code to functions.php file within the Child Theme folder:

function child_theme_customScript() {
 echo '<script src="script.js"></script>';
add_action('wp_head', 'child_theme_customScript');


How to improve SEO? Have you any recommended plugins?

Zephyr comes SEO ready, friendly right out of the box, however, a lot of our clients use Yoast SEO plugin, which works just fine.


Where can I find license KEY for Ultimate Addons / Visual Composer / Revolution Slider plugins?

You don't need a licence key as these plugins came bundled, they will be updated with Zephyr updates. If you are looking for Revolution Slider templates please read this ticket.


Can I use standalone Visual Composer, with all its features?

First of all you need to know that there is no difference between:

  • Visual Composer archive, which is bundled with Zephyr.
  • Visual Composer archive, which is downloaded from CodeCanyon site.

They are absolutely identical.

But Zephyr slightly changes the original plugin functionality due performance and compatibility reasons, specifically the theme:

  1. Adds own options and removes non-compatible options for some elements such as Row and Column.
  2. Disables some original content elements which are similar to the theme elements.
  3. Disables Grid Builder and related content elements (Media Grid, Post Grid, Media Masonry Grid, Masonry Post Grid).
  4. Modifies Visual Composer interface for better user experience.

If you want to enable the 2nd and 3rd points from the list above then navigate to Theme Options > General Settings and enable 'Unsupported Features of Visual Composer' option:



Can I implement theme elements to Revolution Slider / Widget? How to generate shortcodes?

Create a regular page, add desired element via Visual Composer, then switch Visual Composer to Classic Mode, editor to Text mode, to be able to copy shortcodes. Add copied shortcodes to needed place (for example to your Revolution Slider)



How to change 'Read More', 'Send Message' wording?

Download default.po file from /Zephyr/framework/languages to your local disk, install POEdit software, edit desired values, save changes to file, then install Child Theme, create languages folder inside and upload default.po and files to /Zephyr-child/languages folder.


Contact form doesn't send emails, how can I resolve the issue?

Most probably, this issue related to wrong server configuration, try to change receiver email to Gmail, if it won't help we recommend to contact your host regarding this issue.


My site stuck in maintenance mode, how can I make it work again?

Connect to your server via FTP client find and delete .maintenance file within WordPress folder. To find the reason of such behavior you should inspect server error logs.


My site is not loaded, only 500 Server error appears, how can I fix that?

This is a server side error so you should contact your host regarding this error, if they won't help, please ask them to share server error logs so we could investigate the issue better.


Can't import demo data (never ending process), can I cancel it or what should I do?

Usually this issue appears because of small memory limit, we recommend to increase memory_limit value to 256M (at least to 128M), max_upload_size to 50M, and max_execution_time to 300, you should ask your host to increase these values for PHP.


Columns don't stack properly with non-standard grids (for example 1/1 + 1/3 + 1/3 + 1/3), how to align them properly?

You should manually remove left margin (set it to zero) for every first column within a row:



How to change columns order on mobiles?

At the moment there is no such feature out of the box, but here is a workaround, append custom CSS class to the Row with columns which should be reordered (for example reorderedCols):


Then append following code to Theme Options > Styling > Quick CSS:

@media (max-width: 767px) {
.reorderedCols .g-cols {
    display: flex;
    flex-direction: column;
.reorderedCols .g-cols > div:first-child {
    order: 2;
.reorderedCols .g-cols > div:nth-child(2) {
    order: 1;
.reorderedCols .g-cols > div:last-child {
    order: 3;


How can I stylize login page like on demo site?

Step 1. You should create a sidebar at Zephyr > Sidebars, for example login_sidebar:


Step 2. Navigate to Appearance > Widgets, and assign (Upsolution) Login widget to created sidebar:


All these URLs are optional so you can leave these fields blank.

Step 3. Create a regular page or open existing one, add the sidebar via Widgetized Sidebar element:



How to improve my website loading speed and performance

Zephyr is highly optimized right out of the box, and we're constantly working on improvements, however, there are a few recommendations, which can help you to increase your site performance and reduce loading speed:

  • Disable unused plugins, some of them can add an extra script and style files, which can slow down your site.
  • If you're using Revolution Slider plugin we recommend to change its Global Settings to improve performance (click on Revolution Slider link in the sidebar, find and click on Global Settings button at the top of the screen):
    In opened window apply next settings:
  • If you're using Ultimate Addons plugin we recommend to disable unused elements and features at plugin settings.
  • We wouldn't recommend to apply a lot of appearance animations on one page (for Single Image element or Columns):
    Animations can slow down page viewing, also they use a lot of processor resourses.
  • We recommend using caching plugin WP Super Cache, by the way, we use it on our demo sites.
  • If you have a lot of traffic on your site we recommend using CDN like a CloudFlare.
  • Follow the tips from Google PageSpeed Insights and Gmetrix.