Fonts on local server

Hi,
I use Moesia with Font Extension. Now I want to use a special Font saved on the Webserver. So I deactivated the Plugin Font Extension and used the custom css of the child theme in this way:

    /* exo-2-regular - latin */
    @font-face {
      font-family: 'Exo 2';
      font-style: normal;
      font-weight: 400;
      src: url('https://osteopathie-smit.de/fonts/exo-2-v4-latin-regular.eot'); /* IE9 Compat Modes */
      src: local('Exo 2'), local('Exo2-Regular'), 

But this doesn’t work. The Font of the Main Theme (Lato) is always be used. How can I manage it?
Thanks

Hello there,

Please follow this tutorial to correctly add custom font to your site. For Moesia’s body font, you’ll only need this CSS code:

  body { 
    font-family: 'Exo 2';
  } 

instead of:

  /* Body font */
  body,
  #mainnav ul ul a{
    font-family: "NexaLight", sans-serif;
  }

Regards,
Kharis

Hi,
thanks for the quick answer but it doesn’t work.
This is what I did:

  1. Deactivate the Font Extension.
  2. create a folder: moesia-child/font-face
  3. copy the font files to the new folder
  4. put the following to the css of the child theme:
    /* exo-2-regular - latin /
    @font-face {
    font-family: ‘Exo 2’;
    font-style: normal;
    font-weight: 400;
    src: url(‘font-face/exo-2-v4-latin-regular.eot’); /
    IE9 Compat Modes /
    src: local(‘Exo 2’), local(‘Exo2-Regular’),
    url(‘font-face/exo-2-v4-latin-regular.eot?#iefix’) format(‘embedded-opentype’), /
    IE6-IE8 /
    url(‘font-face/exo-2-v4-latin-regular.woff2’) format(‘woff2’), /
    Super Modern Browsers /
    url(‘font-face/exo-2-v4-latin-regular.woff’) format(‘woff’), /
    Modern Browsers /
    url(‘font-face/exo-2-v4-latin-regular.ttf’) format(‘truetype’), /
    Safari, Android, iOS /
    url(‘fonts-face/exo-2-v4-latin-regular.svg#Exo2’) format(‘svg’); /
    Legacy iOS */
    }

/* Body font */
body {
font-family: ‘Exo 2’;
}

Do I have to zip the child-theme folder and re-install it? It doesn’t make sense to me. As you can see here it will be ignored:

The font should look like on this page (it’s the same theme but using the font-extension):

Thanks,
Regina

Hello there,

Have you added this CSS code to your child theme’s stylesheet?

    /* Body font */
    body {
      font-family: 'Exo 2', sans-serif;
    }

You might need to add an !important argument to set highest priority.

    /* Body font */
    body {
      font-family: 'Exo 2', sans-serif !important;
    }

Regards,
Kharis

Yes, even if I add !important, it’s not working.

Hello there,

Delete all custom code in your child theme and do the below steps, please.

  1. Add this code to your child theme’s functions.php
    // Remove default Google Font registering from parent theme.
    function moesia_child_remove_parent_google_font() {
      wp_dequeue_style('moesia-headings-fonts');
      wp_dequeue_style('moesia-body-fonts');
    }
    add_action( 'wp_enqueue_scripts', 'moesia_child_remove_parent_google_font', 100 );

    // Add Google Font using @import.
    function moesia_child_add_google_font(){

      $css  = '<style type="text/css">';
      $css .= '@import url(//fonts.googleapis.com/css?family=Exo:400,500,600,700);';
      $css .= '</style>';

      echo $css;

    }
    add_action('wp_head', 'moesia_child_add_google_font', 7); 
  1. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    body, h1, h2, h3, h4, h5, h6, .main-navigation li, .fact, .all-news, .welcome-button, .call-to-action .employee-position, .post-navigation .nav-previous, .post-navigation .nav-next, .paging-navigation .nav-previous, .paging-navigation .nav-next {
      font-family: 'Exo', sans-serif !important;
    } 
  1. Clear/flush cache (if any), then reload your site to see the changes.

Regards,
Kharis

Hi Kharis,
thaks for your great support. Now it works. I think the problem was to deactivate the Plugin Moesia Fotns Extended. I tried out on two websites with Moesia theme in different ways and it only works if the Fonts Extended Plugin is active.
Again, thanks for your help.
Regina

You’re welcome Regina!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi again,
sorry but still <link rel='dns-prefetch' href='//fonts.googleapis.com' /> stays in the code. It’s not possible to remove it?
Yours,
Regina

Only if I add this in the functions.php it will work:
//Load the fonts
$headings_font = esc_html(get_theme_mod(‘headings_fonts’));
$body_font = esc_html(get_theme_mod(‘body_fonts’));
if( $headings_font ) {
wp_enqueue_style( ‘moesia-headings-fonts’, ‘…/fonts/Exo2-Bold.otf’ );
} else {
wp_enqueue_style( ‘moesia-roboto-condensed’, ‘…/fonts/roboto-v18-latin-regular.ttf’);
}
if( $body_font ) {
wp_enqueue_style( ‘moesia-body-fonts’, ‘…/fonts/exo-2-v4-latin-regular.ttf’ );
} else {
wp_enqueue_style( ‘moesia-roboto’, ‘…/fonts/roboto-v18-latin-regular.ttf’);
}
}

Hello there,

I’ve posted a reply already to your own topic here: Deactivate link to fonts.googleapis.com

Regards,
Kharis