[Resolved] Local Font URL

Home Forums Support Local Font URL

Viewing 15 posts - 1 through 15 (of 30 total)
  • Author
    Posts
  • #1213322
    Michael

    Hi guys, please can you tell me the correct relative format to use for local font?

    I’m having an issue where http://www.reclaimdesign.org breaks the fonts because I have used absolute url:

    @font-face {
    	font-family: "Carrois Gothic";
    	font-style: normal;
    	font-weight: 400;
    	src: local("Carrois Gothic Regular"), local("CarroisGothic-Regular"),
    	   url("https://reclaimdesign.org/wp-content/uploads/fonts/carrois-gothic-v10-latin-regular.woff2") format("woff2"),
    	   url("https://reclaimdesign.org/wp-content/uploads/fonts/carrois-gothic-v10-latin-regular.woff") format("woff");	
    	font-display: swap; /* Avoid showing invisible text while custom font loads */
    }

    I’m not sure of the correct way to write the relative url for this – would it be:

    url("../wp-content/uploads/fonts/carrois-gothic-v10-latin-regular.woff2") format("woff2"),

    Here is the location of the fonts folder:

    https://www.dropbox.com/s/whute5f2ygbey38/fonts-location.jpg?dl=0

    I guess it has to be relative to wherever the custom css file is in the generatepress folder, but I’m not sure where that is, and also how to format the url accordingly.

    Thank you for your advice.

    Hope you are well in these crazy times 🙂

    Michael.

    #1213503
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I actually prefer using absolute URLs. Why aren’t they working?

    Let us know 🙂

    #1218177
    Michael

    Hi Tom,

    Thanks very much for getting back to me. I also do too, but in this instance if I go to https://www.reclaimdesign.org they show up as broken:

    https://www.dropbox.com/s/zzto5j3gdunrqnn/missing-icons.jpg?dl=0

    My hosting company unfortunately does not allow me to alter the nginx file (which is a pain in the arse but nothing I can do on that front) to do a redirect from www to non-www, so I am having to fix the fonts so they can be seen on either correctly since there are several backlinks on the net pointing to the www version.

    Another thing I’m not understanding is why our product photos don’t break – I’m using custom HTML blocks on the pages and have used absolute urls to the images in those eg:

    <img class="round_edges" src="https://reclaimdesign.org/wp-content/uploads/sanding-roofing-trusses.jpg" alt="Sanding Roofing Trusses - The Process Of Making Our Eco-Friendly Home Decor | Reclaim Design" width="600" height="450"/>

    So I’m confused!

    Thank you for your help 🙂

    Michael.

    #1218668
    Tom
    Lead Developer
    Lead Developer

    That’s strange, you should 100% find a way to redirect www to non-www, or you may run into SEO related issues (duplicate content etc..).

    They won’t even make that change for you?

    #1218726
    Michael

    No they won’t – this is what they say:

    “It is technically not possible to add permanent settings to the Nginx configuration file due to the structure of the EasyWP service. The corresponding rule can be added, but it will be reset to the default state after some time.”

    Anyway, given the current economic climate I can’t ditch the hosting I paid for last month to pay for a brand new one, so will have to make do as best I can. I thought that if I could adjust the urls for the fonts that would at least be something.

    #1218940
    Tom
    Lead Developer
    Lead Developer

    That is.. very strange. I’ve never heard of a host not being able to 301 redirect www to non-www (or the other way around). It’s a pretty crucial part of having a website. Perhaps they’re not understanding the request? I would be super surprised if this was indeed the case.

    If you need to use relative URLs, you need to:

    1. Add the font files into your child theme.
    2. Add the CSS into your child theme style.css.

    Now that they both exist in the same directory, you can use relative URLs and it should work perfectly.

    #1219190
    Michael

    Hi Tom,

    Thanks for getting back to me. I think they understand the request, since I’ve asked them around a dozen times over the past month 🙂 They have said the only way to do this is to change my hosting package from managed to shared. My understanding is that shared will likely cause significant performance degradation, so that doesn’t really provide an alternative. Weirdly though Siteground is a managed host as far as I know and they allow access to server files, so I also don’t understand why Namecheap can’t. Anyway, it’s a bit of a head hitting against brick wall scenario…..

    In terms of the relative urls, I don’t actually have a child theme, I’ve just been adding to the css via Simple CSS. Is it a better idea to make a child theme (although I don’t have a clue how to do that). And is there a specific structure I’d have to adopt?

    Thank you for your help!

    Michael.

    #1219796
    Tom
    Lead Developer
    Lead Developer

    A child theme is required if you want to use relative URLs. Something like Simple CSS outputs the CSS in the <head> of your website, so those relative URLs always change depending on the URL you’re visiting.

    For example, here’s the relative URL: /fonts/file.ttf

    If you’re on the /about/ page, it will look for the file here: /about/fonts/file.ttf

    If the CSS is in a child theme with the font files, the relative URL remains constant, regardless of the URL being visited.

    #1219909
    Michael

    Thanks a lot Tom. I will try that then. Hopefully it will not go horribly wrong!

    #1220167
    Tom
    Lead Developer
    Lead Developer
    #1229821
    Michael

    Hi Tom,

    I’m looking at installing the child theme this afternoon, and noticed it mentioned this in the help file:

    The only time you risk losing changes is when you make them to the parent theme files or use the Additional CSS field from WordPress.

    My CSS has all been entered via Simple CSS. Will that be a problem?

    Thank you for your help.

    Michael.

    #1230015
    David
    Staff
    Customer Support

    Hi there,

    No Simple CSS stores the CSS separately

    #1230029
    Michael

    Fantastic, thank you David. I’ve uploaded the child theme zip. It didn’t specify in the help – should I Activate it? Sorry if it’s a dunce question, but I don’t want to break the site! And once it’s in place, should I cut and paste the CSS from Simple CSS (it’s around 1700 lines long) into the style.css? I seem to remember reading that if the CSS is over 1000 lines long it should go in a child theme (but I can’t find that help file now – maybe it was a post on the forum)

    #1230553
    Tom
    Lead Developer
    Lead Developer

    Yes, you’ll want to activate the child theme.

    Then you can move your CSS over to the style.css 🙂

    #1230781
    Michael

    Thanks very much Tom 🙂 I’ve done that and it all seems A OK, which is great! Can I just ask – is Simple CSS redundant now in the case of the child theme? Just checking if it is so I can uninstall if it’s not needed, and I can just make future edits in the Edit Themes area?

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