0

I am using @font-face in CSS file with a relative url to font files (relative to the css file). However on the endpoints of the account page (create by woocommerce) the relative nature of the url breaks and includes the endpoint.

For example: url('url/something/something/') will become url('url/endpoint/something/something/)

I am assuming that this is normal behviour, however I cannot find any references as to how to overcome it in the css file short of generating rules at load or by using absolute paths.

Improve this question

1 Answer 1

Reset to default
1

It was my mistake. I forgot I was using a preload link in the head of the file. In the head of the html I had:

<link rel = "preload" href = "../wp-content/themes/themename/locationfolders/font.woff2" as="font" type = "font/woff2" crossorigin />

Note the .. at the start of the href

what it should be is:

<link rel = "preload" href = "/wp-content/themes/themename/locationsfolders/font.woff2" as="font" type = "font/woff2" crossorigin />

This is still "relative", but to the home URL... which is what I was after.

Improve this answer
2
  • Glad you solved it, but that's hard-coding the name of the content and themes folder though, which WordPress does let you change, so your theme will break for anyone who has done that (if you were selling it etc.). You shouldn't have to do this: if this is something WooCommerce is forcing you to do then I'd report it to them as a bug. Commented Nov 4, 2022 at 9:46
  • Thanks for the advice. I will look into this a bit more. I don't plan on selling it, as it is a custom theme for myself. But I am always looking at how things work, so I will keep my eye out, Also if anyone else has come across this before I would love to know. Commented Nov 9, 2022 at 5:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.