Archived topic
Frackin' relative URLs
4 replies · Started by Teresa on March 30, 2020
I'm trying add local fonts to my customer's site. Tom's tutorial is great...but I don't want to use explicit URLs, I want to use relative ones for my CSS.
This is a sample of my CSS:
/* Webfont: Edingu-Regular */@font-face {
font-family: 'Edingu';
src: url('edigu/Edingu-Regular.eot'); /* IE9 Compat Modes */
src: url('edigu/Edingu-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('edigu/Edingu-Regular.woff') format('woff'), /* Modern Browsers */
url('edigu/Edingu-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('edigu/Edingu-Regular.svg#Edingu-Regular') format('svg'); /* Legacy iOS */
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
}
The font is showing up in the Typography section (yay for cut and paste PHP) just fine, but the font isn't actually showing.
I'm using a child theme called generatepress_child ... in the usual place the the fonts are all in edigu dir. So what's the right relative URL to use here? ./edigu ? /wp-content/themes/generatepress_child/edigu/ ?
It's the one thing about CSS I always forget.
Thanks ... Tris
Typo. Stupid typo.
Hi there,
so in your child theme folder you:
1. place your styles.css that includes your @font-face.
2. Create a folder named fonts
Then the relative path would be /fonts/file.ttf for example.
Thanks David. I figured out what I did wrong. In the code I have the dir as edigu when in fact the dir is edingu (stupid n) ... so my original ./edingu... would have worked if I had actually typed the line right.
I'm blaming my wrist brace I have to wear right now. Yeah, it's the wrist brace.
Haha :)
Glad to hear you got it resolved.
