Custom font not displaying

I also tried it inline, style="font-family: harrison;" and it also didn't make it be harrison.

This is the code I put in snippets:

add_filter( 'generate_typography_default_fonts','tu_add_system_fonts' );
function tu_add_system_fonts( $fonts ) {
$fonts[] = 'harrison';
return $fonts;
}

This is the code I put in simple css:

@font-face {
font-family: 'harrison';
src:url('harrison.ttf.woff') format('woff'),
url('harrison.ttf.svg#harrison') format('svg'),
url('harrison.ttf.eot'),
url('harrison.ttf.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}

This is my site: dinagaines.com.

If you notice, the site name, main headline, and Hi, I'm Dina are all not Harrison. Those are the ones I tried to change to Harrison.

Thanks for any help, all the best,
Dina

Uploading the .zip won't work - you need to upload the individual font files.

Check out this block you added:

@font-face {
    font-family: 'harrison';
    src:url('harrison.ttf.woff') format('woff'),
        url('harrison.ttf.svg#harrison') format('svg'),
        url('harrison.ttf.eot'),
        url('harrison.ttf.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

Notice those font file? Those need to point to the actual files.

So if you upload the files to your child theme in a fonts folder, you would do this:

@font-face {
    font-family: 'harrison';
    src:url('https://yoururl.com/wp-content/themes/generatepress_child/fonts/harrison.ttf.woff') format('woff'),
        url('https://yoururl.com/wp-content/themes/generatepress_child/fonts/harrison.ttf.svg#harrison') format('svg'),
        url('https://yoururl.com/wp-content/themes/generatepress_child/fonts/harrison.ttf.eot'),
        url('https://yoururl.com/wp-content/themes/generatepress_child/fonts/harrison.ttf.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

Then everything should work :)

Hi,

Thanks very much for your reply. I chatted with the hosting people, and they said uploading the files individually may cause problems with my site, that I should leave it as a zip file. This is the file path:

/home1/jewishpo/public_html/dinagaines/wp-content/themes/freelancer/webfonts_harrison.zip

So, in the font-face code, I don't have the four different formats. they all have the same path. Do I need to adjust the code in some way? Or do I replace this ('harrison.ttf.woff') and all the other ones, with this ('/home1/jewishpo/public_html/dinagaines/wp-content/themes/freelancer/webfonts_harrison.zip')?

And in the code snippets, do I still put 'harrison' or do I put 'webfonts_harrison'?

Thanks for your help!

All the best,
Dina

Hi Dina,

Not sure what they're talking about - your entire WordPress site is run off of individual files.

Using custom fonts requires the font files to be unpacked - it won't work while they're zipped up.

Who's your hosting?

Bluehost.

If I upload them and then see I have issues, would deleting them remove the issue?

I really do want to figure this out and not give up. I may want to use custom fonts again in future.

Is this a generatepress thing or a hosting thing? I don't want to take advantage of your time yet this issue is still here.

??

Thanks,
Dina

You won't have any issues, but you can always delete files that you've uploaded.

I would ignore their advice (it's likely just a confused agent), and upload the individual files to your server.

Then point to them in your @font-face code, and you'll be good to go :)

Hi,

Thanks so much Tom. Sorry this is dragging on.

I put in the individual font files into a newly-created fonts folder. My site did not break (yay).
I put the filter code in snippets.
I put the new font-face code in simple css.

It is still not showing up.

This is the file path I used, could it possibly be this?

https://dinagaines.com/home1/jewishpo/public_html/dinagaines/wp-content/themes/freelancer/fonts/harrison.ttf.woff

The bluehost account has a bunch of domains, dinagaines.com is not the main one, not the original one for this hosting account. Could that be the issue?

The very top of my file accordion says: home1/jewishpo

Do I write

https://home1/jewishpo...

instead of

https://dinagaines.com/home1/jewishpo...

or something else... ?

I tried it both ways, and still nothing changed.

I feel like I am missing something basic but don't even know what that may be. Something like forgetting to turn on the monitor and wondering why it's all dark.

I appreciate your patience and help with this.

All the best,
Dina

Hi Dina,

It should be this:

https://www.dinagaines.com/wp-content/themes/freelancer/fonts/harrison.ttf.woff

You should be able to pop that into your browser and it should download the font.

If it returns a 404 error, it means the URL is wrong.

Hope this helps :)

Hi Tom,

It doesn't get an error, it just goes back to the page I was on, as if nothing happened.

The files are not in "dinagaines.com" they are in "dinagaines." The folder dinagaines.com is empty. All the files are in dinagaines. I asked them over at blue host and they said it is normal that everything in dinagaines, not dinagaines.com.

When I put it in the browser without the ".com" of course it goes nowhere.

Thanks,
Dina

It's not so much about the folder as it is about the website URL.

If you pop in the URL I provided above, you'll see it downloads the file.

Oh my goodness YAY! It totally worked.

Thank you so much for your help and for sticking with me this long. I appreciate it so much!

All the best,
Dina

You're welcome! :)