Custom font not working in Firefox or Safari mobile

Support
#1

I have looked at various topics but none of them have solved my problem.

I have set up a child theme and added this to my Theme Options>CSS:

@font-face {
font-family: 'Bellfort-Light';
src:url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_A_0.eot');
src:url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_A_0.eot?#iefix') format('embedded-opentype'),
    url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_A_0.woff2') format('woff2'),
    url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_A_0.woff') format('woff'),
    url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_A_0.ttf') format('truetype');
}

@font-face {
font-family: 'Bellfort-Bold';
src:url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_7_0.eot');
src:url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_7_0.eot?#iefix') format('embedded-opentype'),
    url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_7_0.woff2') format('woff2'),
    url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_7_0.woff') format('woff'),
    url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_7_0.ttf') format('truetype');
}

@font-face {
font-family: 'BellfortRough-Bold';
src:url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_15_0.eot');
src:url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_15_0.eot?#iefix') format('embedded-opentype'),
    url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_15_0.woff2') format('woff2'),
    url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_15_0.woff') format('woff'),
    url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_15_0.ttf') format('truetype');
}

@font-face {
font-family: 'BellfortRoughDemo';
src:url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_16_0.eot');
src:url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_16_0.eot?#iefix') format('embedded-opentype'),
    url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_16_0.woff2') format('woff2'),
    url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_16_0.woff') format('woff'),
    url('http://theshow608.flywheelsites.com/wp-content/themes/x-child/fonts/378321_16_0.ttf') format('truetype');
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, blockquote {
	font-family: 'BellfortRoughDemo', Fallback, sans-serif !important;
}

body {
font-family: 'Bellfort-Light', Fallback, sans-serif;
}

The font works as expected in Safari and Chrome but in Firefox and iOS it displays as sans-serif.

I know I don’t have the .svg file (MyFonts didn’t provide one) but I am using the latest iOS Safari so I don’t need a legacy format.

What am I missing?

Thanks,
Don

#2

Hi @zenzino,

Thanks for reaching out.

Some of your font files are missing, example, try accessing these






You can also verify it through the browser’s developer console, it will display the 404 errors for missing files. But of course, it will work on a system where the fonts are already installed (as the browser doesn’t need to download it).

Please also change this part

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, blockquote {
	font-family: 'BellfortRoughDemo', Fallback, sans-serif !important;
}

body {
font-family: 'Bellfort-Light', Fallback, sans-serif;
}

to this

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, blockquote {
	font-family: 'BellfortRoughDemo', sans-serif !important;
}

body {
font-family: 'Bellfort-Light', sans-serif !important;
}

And it may still not work, as you’re only changing the body font and headline font, some elements have its own font styling where you’ll need to apply your custom font (through CSS). It has to be applied to the element you intend to render the font.

Thanks!

1 Like
#3

Hi @Rad,

Thanks for the quick response. As usual, you were correct! I had the fonts installed on my computer which fooled me into thinking the font was loading correctly when viewed in Safari.

The problem was, I copied the file path from another thread and they were using x-child and I am using pro-child. So I corrected the file path and… it still didn’t work.

I looked at it through the developer console as you suggested and saw that it was giving a 403 Forbidden error. So I check the permissions and the folder was set for 755 but the font files (for some reason) were set at 600. So I changed them all to 755 and VOILA!

Thanks so much for your help,
@zenzino

#4

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

#5

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