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:
- Set-up child theme – https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57
- 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/ - Create fonts folder in your child theme directory (wp-content/themes/x-child/fonts)
- Upload all font files to your fonts folder(wp-content/themes/x-child/fonts) using ftp
- 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!
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.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.