- This topic has 36 replies, 2 voices, and was last updated 3 years, 9 months ago by Tom.
-
AuthorPosts
-
March 28, 2020 at 11:47 am #1213322Michael
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.
March 28, 2020 at 4:01 pm #1213503TomLead DeveloperLead DeveloperHi there,
I actually prefer using absolute URLs. Why aren’t they working?
Let us know π
March 29, 2020 at 2:24 am #1218177MichaelHi 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.
March 29, 2020 at 9:49 am #1218668TomLead DeveloperLead DeveloperThat’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?
March 29, 2020 at 11:02 am #1218726MichaelNo 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.
March 29, 2020 at 4:16 pm #1218940TomLead DeveloperLead DeveloperThat 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.
March 30, 2020 at 2:18 am #1219190MichaelHi 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.
March 30, 2020 at 9:43 am #1219796TomLead DeveloperLead DeveloperA 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.
March 30, 2020 at 11:15 am #1219909MichaelThanks a lot Tom. I will try that then. Hopefully it will not go horribly wrong!
March 30, 2020 at 4:12 pm #1220167TomLead DeveloperLead DeveloperNo problem! π
April 7, 2020 at 7:32 am #1229821MichaelHi 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.
April 7, 2020 at 8:23 am #1230015DavidStaffCustomer SupportHi there,
No Simple CSS stores the CSS separately
April 7, 2020 at 8:39 am #1230029MichaelFantastic, 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)
April 7, 2020 at 5:00 pm #1230553TomLead DeveloperLead DeveloperYes, you’ll want to activate the child theme.
Then you can move your CSS over to the style.css π
April 7, 2020 at 11:59 pm #1230781MichaelThanks 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?
-
AuthorPosts
- You must be logged in to reply to this topic.