Custom Fonts not working on iOS

Support
#1

Hi there,

I have installed custom fonts to my site ( www.joannebyrne.ie ) and they’re not working on any computer/device that doesn’t have them installed. I have added the code below to the editor, can you tell me why this isn’t working?

Thanks,
Joanne

/*

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: ‘Feijoa’;
src: url(‘http://joannebyrne.ie/wp-content/themes/x/fonts/Feijoa-Medium.eot’);
src: url(‘http://joannebyrne.ie/wp-content/themes/x/fonts/Feijoa-Medium.eot?#iefix’) format(‘embedded-opentype’),
url(‘http://joannebyrne.ie/wp-content/themes/x/fonts/Feijoa-Medium.woff2’) format(‘woff2’),
url(‘http://joannebyrne.ie/wp-content/themes/x/fonts/Feijoa-Medium.woff’) format(‘woff’),
url(‘http://joannebyrne.ie/wp-content/themes/x/fonts/Feijoa-Medium.ttf’) format(‘truetype’),
url(‘http://joannebyrne.ie/wp-content/themes/x/fonts/Feijoa-Medium.svg#Feijoa-Medium’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘Basis Grotesque’;
src: url(‘http://joannebyrne.ie/wp-content/themes/x/fonts/BasisGrotesque-Medium.eot’);
src: url(‘http://joannebyrne.ie/wp-content/themes/x/fonts/BasisGrotesque-Medium.eot?#iefix’) format(‘embedded-opentype’),
url(‘http://joannebyrne.ie/wp-content/themes/x/fonts/BasisGrotesque-Medium.woff2’) format(‘woff2’),
url(‘http://joannebyrne.ie/wp-content/themes/x/fonts/BasisGrotesque-Medium.woff’) format(‘woff’),
url(‘http://joannebyrne.ie/wp-content/themes/x/fonts/BasisGrotesque-Medium.ttf’) format(‘truetype’),
url(‘http://joannebyrne.ie/wp-content/themes/x/fonts/BasisGrotesque-Medium.svg#BasisGrotesque-Medium’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘Founders Grotesk’;
src: url(‘http://joannebyrne.ie/wp-content/themes/x/fonts/FoundersGrotesk-Light.eot’);
src: url(‘http://joannebyrne.ie/wp-content/themes/x/fonts/FoundersGrotesk-Light.eot?#iefix’) format(‘embedded-opentype’),
url(‘http://joannebyrne.ie/wp-content/themes/x/fonts/FoundersGrotesk-Light.woff2’) format(‘woff2’),
url(‘http://joannebyrne.ie/wp-content/themes/x/fonts/FoundersGrotesk-Light.woff’) format(‘woff’),
url(‘http://joannebyrne.ie/wp-content/themes/x/fonts/FoundersGrotesk-Light.ttf’) format(‘truetype’),
url(‘http://joannebyrne.ie/wp-content/themes/x/fonts/FoundersGrotesk-Light.svg#FoundersGrotesk-Light’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

h1 {
font-family: ‘Founders Grotesk’, Helvetica, sans-serif !important;
}
h2 {
font-family: ‘Founders Grotesk’, Helvetica, sans-serif !important;
}
body {
font-family: ‘Founders Grotesk’, Helvetica, sans-serif !important;
}
h3 {
font-family: ‘Founders Grotesk’, Helvetica, sans-serif !important;
}
h4 {
font-family: ‘Founders Grotesk’, Helvetica, sans-serif !important;
}
h5 {
font-family: ‘Founders Grotesk’, Helvetica, sans-serif !important;
}

#2

Hello Joanne,

Thanks for writing in!

Please make sure that you have uploaded all the font files in your child theme’s folder:

http://joannebyrne.ie/wp-content/themes/x/fonts/```

At the moment, most of the fonts does not exist when you check it using their absolute links:
- http://joannebyrne.ie/wp-content/themes/x/fonts/FoundersGrotesk-Light.eot
- http://joannebyrne.ie/wp-content/themes/x/fonts/FoundersGrotesk-Light.woff2
- http://joannebyrne.ie/wp-content/themes/x/fonts/FoundersGrotesk-Light.woff
- http://joannebyrne.ie/wp-content/themes/x/fonts/FoundersGrotesk-Light.ttf

Regards.
#3

Thanks for your help,

I have moved them to the child’s theme folder but they’re still not working. Any advice greatly appreciated.

I’ll include an image below

Thanks,
Joanne

#4

I got it sorted, thanks

#5

Hello Joanne,

It’s good to know that you have resolved the issue already.

Regards.

#6

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