Trouble using custom Font

[smoothjapan]

Hi there.

I want to use the custom font Bebas and have added this code to the child theme of my X (latest).

/*

 Theme Name: X – Child Theme
 Theme URI: http://theme.co/x/
 Author: Themeco
 Author URI: http://theme.co/
 Description: Make all of your modifications to X in this child theme.
 Version: 1.0.0
 Template: x

*/

@font-face {
  font-family: 'Bebas';
  src: url('path-to-your-font-directory/font_name.eot');
  src: url('/wp-content/themes/x-child/bebas-font/Bebas.ttf.eot?#iefix') format('embedded-opentype'),
       url('/wp-content/themes/x-child/bebas-font/Bebas.ttf.woff') format('woff'),
       url('/wp-content/themes/x-child/bebas-font/Bebas.ttf.eot')  format('truetype'),
       url('/wp-content/themes/x-child/bebas-font/Bebas.ttf.svg#Bebas') format('svg');
}

I’m not seeing this as usable and would like your assistance on confirming that this is implemented the correct way.

Thanks.

[christian]

Hey @smoothjapan,

Use full URL in the directory like this.

@font-face {
  font-family: 'Bebas';
  src: url(http://example.com/wp-content/themes/pro-child//bebas/BEBAS.ttf);
}

And, if you don’t need this line src: url('path-to-your-font-directory/font_name.eot');, you should remove it.

In case you want an alternative approach, please see https://youtu.be/2gD4TrV_Kv4

Hope that helps.