[Resolved] Custom font not displaying

Home Forums Support [Resolved] Custom font not displaying

Home Forums Support Custom font not displaying

  • This topic has 12 replies, 2 voices, and was last updated 6 years ago by Tom.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #513994
    dgainesj

    Hi,

    I added a custom font to my site, the Harrison font, and when I change to it in the customizer, the font is just normal, it looks like times new roman, maybe?

    This is what I did:
    Uploaded the zip file to the file manager.
    Added the filter code to the code snippets plugin.
    Added the font-face code to the simple css section.

    The harrison font shows up in the customizer, it just doesn’t show up on the web page. Could it be an issue with the files itself, or is this my own user error, or something else… ?

    What are my steps for figuring this out?

    Thanks very much!

    All the best,
    Dina

    #514000
    dgainesj

    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

    #514108
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #514500
    dgainesj

    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

    #514950
    Tom
    Lead Developer
    Lead Developer

    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?

    #515289
    dgainesj

    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

    #515759
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #516561
    dgainesj

    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

    #516754
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #516836
    dgainesj

    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

    #517058
    Tom
    Lead Developer
    Lead Developer

    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.

    #518407
    dgainesj

    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

    #518935
    Tom
    Lead Developer
    Lead Developer

    You’re welcome! πŸ™‚

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.