Font Embedding Woes...
Permalink
I added a folder called 'fonts' to my theme folder. I tried to embed the font in typography.css with this code but it does not work:
@font-face {
font-family: 'MyCoolFont';
src: url('fonts/my_cool_font.eot');
src: url('fonts/my_cool_font.woff') format('woff'),
url('fonts/my_cool_font.ttf') format('truetype'),
url('fonts/my_cool_font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
If, however, I include the complete path to the font, it does:
@font-face {
font-family: 'MyCoolFont';
src: url('http://www.mywebsite.com/themes/mytheme/fonts/my_cool_font.eot');
src: url('http://www.mywebsite.com/themes/mytheme/fonts/my_cool_font.woff') format('woff'),
url('http://www.mywebsite.com/themes/mytheme/fonts/my_cool_font.ttf') format('truetype'),
url('http://www.mywebsite.com/themes/mytheme/fonts/my_cool_font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
How do I fix this issue? I don't want the full path in the style sheet like that. Thanks!
@font-face {
font-family: 'MyCoolFont';
src: url('fonts/my_cool_font.eot');
src: url('fonts/my_cool_font.woff') format('woff'),
url('fonts/my_cool_font.ttf') format('truetype'),
url('fonts/my_cool_font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
If, however, I include the complete path to the font, it does:
@font-face {
font-family: 'MyCoolFont';
src: url('http://www.mywebsite.com/themes/mytheme/fonts/my_cool_font.eot');
src: url('http://www.mywebsite.com/themes/mytheme/fonts/my_cool_font.woff') format('woff'),
url('http://www.mywebsite.com/themes/mytheme/fonts/my_cool_font.ttf') format('truetype'),
url('http://www.mywebsite.com/themes/mytheme/fonts/my_cool_font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
How do I fix this issue? I don't want the full path in the style sheet like that. Thanks!
You have probably tried this already but try adding a / in front of src: url(/fonts.....etc
Yeah, already tried :-( Thanks though.
Hi,
Perhaps you should try calling from the theme path as with other files:
Perhaps you should try calling from the theme path as with other files:
<?=$this->getThemePath()?>/
Unfortunately, PHP cannot be executed inside a CSS file... (or can it?) Anyway, I tried it and it didn't work.
I've always done relative pathing for the font URLs, but one thing I did notice with C5 is that I've had to remove the inner quotes around the font URL.
Repeat for all the font face URLs. Give that a whirl and let us know how it goes.
src: url(fonts/my_cool_font.eot);
Repeat for all the font face URLs. Give that a whirl and let us know how it goes.
Tried it... didn't work for me.
EDIT
I think I was trying /fonts/... or something
It turns out that C5 does not work when there are quotes around it. In fact, it actually takes the CSS file, moves it to a new location, and goes through and turns all url(some/path.asset) to url(http://www.mysite.com/some/path.asset). Didn't expect that!
EDIT
I think I was trying /fonts/... or something
It turns out that C5 does not work when there are quotes around it. In fact, it actually takes the CSS file, moves it to a new location, and goes through and turns all url(some/path.asset) to url(http://www.mysite.com/some/path.asset). Didn't expect that!
Did you try:
<link rel="stylesheet" type="text/css" href="<?=$this->getThemePath()?>/fonts/typography.css">
I had to include the full path to the font, without quotes, after the src:...
So it would be something like url(http://my.url/font/myfont.eot) . That should do it for you. After that, reference the font in your CSS exactly the same way it's referenced at the beginning of the @font-face declaration.
Edit: Just saw the bit about no full path. Doesn't make sense why /my/path/font.eot wouldn't work. Let us know what you find.
So it would be something like url(http://my.url/font/myfont.eot) . That should do it for you. After that, reference the font in your CSS exactly the same way it's referenced at the beginning of the @font-face declaration.
Edit: Just saw the bit about no full path. Doesn't make sense why /my/path/font.eot wouldn't work. Let us know what you find.
yup, had my @fontface fonts disappear right after I upgraded a site from 5.4.1.1 to 5.4.2. switched to getThemePath and things are fine again. I have to use this method sometimes when trying to get SSL to validate for c5 ecommerce. I guess I'll need to switch over to use it now on everything just in case.
