Custom font "Eraser dust" not working in Chrome and IE

Hey guys,
I got a problem with the Custom Font “Eraser Dust” I am trying to use for headlines and buttons in my webpage www.aegrv.com.
The font doesn’t show up in the buttons in Chrome and not at all using Internet explorer. Mozilla works splendidly.
Can you help me to fix this?
Thanx a lot and keep up the good work!
Greetz
Max

Hi Max,

Thank you for reaching out to us. I checked your setup and I see you’ve not uploaded all the font files and using only ttf one (see screenshot)

To make sure your custom font works in all compatible browsers then you need to upload all the font files. Please follow these steps:

  1. Set-up child theme – https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57
  2. Convert your font file to these extensions (eot, woff2, woff,ttf svg)
    you can use the following site for the conversion: http://www.font2web.com/
  3. Create fonts folder in your child theme directory (wp-content/themes/x-child/fonts)
  4. Upload all font files to your fonts folder(wp-content/themes/x-child/fonts) using ftp
  5. Add the following code in your child theme’s style.css file:
@font-face {
  font-family: 'MyWebFont ';
  src: url('http://www.yoursite.com/wp-content/themes/x-child/fonts/MyWebFont.eot'); /* IE9 Compat Modes */
  src: url('http://www.yoursite.com/wp-content/themes/x-child/fonts/MyWebFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('http://www.yoursite.com/wp-content/themes/x-child/fonts/MyWebFont.woff2') format('woff2'), /* Super Modern Browsers */
       url('http://www.yoursite.com/wp-content/themes/x-child/fonts/MyWebFont.woff') format('woff'), /* Pretty Modern Browsers */
       url('http://www.yoursite.com/wp-content/themes/x-child/fonts/MyWebFont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('http://www.yoursite.com/wp-content/themes/x-child/fonts/MyWebFont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Change yoursite.com with your domain and MyWebFont with the filename of your font and then you can use your custom font anywhere you’d like. To learn more about using custom fonts, please see https://css-tricks.com/snippets/css/using-font-face/

Let us know how this goes!

1 Like

Hey Dude,
now it works perfectly, thanks for helping me out and thanks for the concise explanations!
Keep up the good work, you guys are doing swell!
Greetings
Max

You’re most welcome, Max. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.