-
This is a sample local font code block that loads in a child theme on a website
/* inter-regular - latin */ @font-face { font-display: swap; font-family: 'Inter'; font-style: normal; font-weight: 400; src: url('https://dev.testsite.com/wp-content/uploads/core/localfonts/inter-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }We store these local fonts in the same relative directory across our development, test, and production servers.
How can I code the src URL so that it is relative to the parent URL where it sits – rather than explicitly written as in the example above?
-
Hi there,
Sorry I’m not too familiar with this and can’t see how this is a theme-related/specific issue either.
I Googled “Relative src URL for font face” and saw some related articles so that might be a good place to start?
Let me know if I’m missing something here.
-
Stepping back to the source of my question, GeneratePress offers a nice article on adding local fonts here: https://docs.generatepress.com/article/adding-local-fonts/.
In that article under ‘Using @font-face’ it goes into detail about how to copy the CSS and use it.
Thus my question builds from that – in the src: line is a full URL:
src: url('https://dev.testsite.com/wp-content/uploads/core/localfonts/inter-v13-latin-regular.woff2') format('woff2');My question is, can you use a site-root relative URL instead of the full URL presented above, and extrapolating from the above, would the following be correct?:
src: url('/wp-content/uploads/core/localfonts/inter-v13-latin-regular.woff2') format('woff2');Thank you
-
I don’t see why not – it’s worth a try 🙂
- You must be logged in to reply to this topic.