Can't get custom fonts to display

[AllIn]

Hi there,

I’ve tried adding a custom font following an example given in another support conversation by still having trouble getting it to work.

Site is:
http://wordpress-148426-569747.cloudwaysapps.com

I uploaded the fonts to a fonts folder under the child theme and added this code to the theme options > css, but they aren’t displaying;

@font-face {
font-family: ‘FFScalaWeb’;
src: url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/x-child/fonts/374ED6_0_0.eot’); /* IE9 Compat Modes /
src: url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/x-child/fonts/374ED6_0_0.eot?#iefix’) format(‘embedded-opentype’), / IE6-IE8 /
url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/x-child/fonts/374ED6_0_0.woff2’) format(‘woff2’), / Super Modern Browsers /
url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/x-child/fonts/374ED6_0_0.woff’) format(‘woff’), / Pretty Modern Browsers /
url(‘hhttp://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/x-child/fonts/374ED6_0_0.ttf’) format(‘truetype’), / Safari, Android, iOS /
url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/x-child/fonts/374ED6_0_0.svg#svgFontName’) format(‘svg’); / Legacy iOS */
}
body {
font-family: “FFScalaWeb”, Georgia, Times, serif
}

Please let me know if there is something I’m doing wrong

[paul.r]

Hi,

If you go directly to your font file it shows 404

http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/x-child/fonts/374ED6_0_0.eot

which means the path is incorrect.

Can you provide us a screenshot of the directory where you have uploaded your font files.

Thanks

[AllIn]

Hi Paul,

Thanks for the reply, oh I see, I’ll update that now and try.

Here is a screenshot of the directory for you anyway.

Will reply soon if I can’t get it to work

[AllIn]

Thanks for your help, after correcting the path it started to work. (I had put x-child instead of pro-child, that was causing the issue.

I want to add 2 different fonts and they have 2 different weights/styles, how is best to do this?

eg. I have 2 styles of FFScala and 2 styles of Din, do I use the same code as above for all 4 lots of files?

[thai]

Hi There,

Please take a look at this article:

@font-face

Here is an example font-face CSS include the font weight:

@font-face {
	font-family: "Bitstream Vera Serif Bold";
	src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
	font-weight: 600;
	font-style: normal;
}

Hope it helps