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.

1 Answer 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.

  • 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.
    – Rup
    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. 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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.