How to integrate a third party fonts in executive-pro

[Sophieja23]

Hi @all,

I would like to integrate a third party fonts in executive pro. The producer has a instruction to do this.

I uploaded the fonts in a new directory "Fonts". It looks like this: /executive-pro/Fonts/1475730/... in this directory I have the fonts files and a demo.css with this code:
@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=456aabe6-808e-4b4c-b6df-10b6e0446955&fontids=1475730");
@font-face{
font-family:"Frutiger LT W01_45 Ligh1475730";
src:url("Fonts/1475730/81e3653a-53bd-49d9-a1f8-f924811b6f02.eot?#iefix");
src:url("Fonts/1475730/81e3653a-53bd-49d9-a1f8-f924811b6f02.eot?#iefix") format("eot"),url("Fonts/1475730/087d8a95-3f25-4bae-a1d1-db9ddffd72f5.woff2") format("woff2"),url("Fonts/1475730/ab1bcdf7-9570-4cba-a8e3-3e39ddd861db.woff") format("woff"),url("Fonts/1475730/83c94878-06c8-442c-a7df-d520b0ced00b.ttf") format("truetype");
}

Second I had to put this line of code in the theme settings in header. So I added this line of code in the genesis theme settings in header scripts:

<link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/fonts/1475730/demo.css">

However, it does not work. What is wrong?

Thanks so much for your help!
Sphie

http://petra-ridder.com

[Victor Font]

The import statement is not loading anything from your site. The URL is fast.fonts.net. In fact, you don't need the @import line at all. It can be deleted. What you should have is something like this:

/* fonts */
@font-face {
  font-family: 'Frutiger LT W01_45 Ligh1475730';
  font-weight: 400;
  font-style: normal;
  src: url('Fonts/1475730/81e3653a-53bd-49d9-a1f8-f924811b6f02.eot');
  src: url('Fonts/1475730/81e3653a-53bd-49d9-a1f8-f924811b6f02.eot?#iefix') format('embedded-opentype'),
       url('Fonts/1475730/087d8a95-3f25-4bae-a1d1-db9ddffd72f5.woff2') format('woff2'),
       url('Fonts/1475730/ab1bcdf7-9570-4cba-a8e3-3e39ddd861db.woff') format('woff'),
       url('Fonts/1475730/83c94878-06c8-442c-a7df-d520b0ced00b.ttf') format('truetype');
}

Next, whenever you add any script file to WordPress, it should be enqueued. You'll find a function in the Executive Pro functions.php at line 24 named executive_load_scripts(). Add the following line to the function:

wp_enqueue_style( 'frutiger-font', get_bloginfo( 'stylesheet_directory' ) . '/Fonts/1475730/demo.css', array(), '1.0.0' );

Last, in your code, you have the Fonts directory both capitalized and lower case. To a web server, these are two different directories. Make sure the spelling is exactly the same as the directory you created.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Sophieja23]

Hi, thank you so much for your help. Although it does not work right now I am getting closer. I tried to set h2 to frutiger but it says "failed to load ressource".

I set the "fonts" directory all to lower case - thanks for your tip.

Sophie

[Author]

Posts