font face not working in Concrete5
Permalink
Morning all, Have spend the past day trying to get concrete 5 to accept @font face fonts to no avail.
Has anyone else had success in this area?
Has anyone else had success in this area?
Hi Jon,
its definitely C5 as the code works ok on a simple html document.
css code
<code>
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 3, 2010 12:17:08 PM America/New_York */
@font-face {
font-family: 'WCRhesusABtaRegular';
src: url('WC_Rhesus_A_Bta-webfont.eot');
src: local('☺'), url('WC_Rhesus_A_Bta-webfont.woff') format('woff'), url('WC_Rhesus_A_Bta-webfont.ttf') format('truetype'), url('WC_Rhesus_A_Bta-webfont.svg#webfont1KkdLMuc') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'WCRhesusBBtaItalic';
src: url('WC_Rhesus_B_Bta-webfont.eot');
src: local('☺'), url('WC_Rhesus_B_Bta-webfont.woff') format('woff'), url('WC_Rhesus_B_Bta-webfont.ttf') format('truetype'), url('WC_Rhesus_B_Bta-webfont.svg#webfont9MCWWyZz') format('svg');
font-weight: normal;
font-style: normal;
}
div#content h1.fontface
{
font: 40px/28px 'WCRhesusABtaRegular', Arial, sans-serif;letter-spacing: 0;
}
div.blurbBox
{
font-family: 'WCRhesusABtaRegular', Arial, sans-serif;
font-size:20px;
line-height:25px;
}
</code>
its definitely C5 as the code works ok on a simple html document.
css code
<code>
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 3, 2010 12:17:08 PM America/New_York */
@font-face {
font-family: 'WCRhesusABtaRegular';
src: url('WC_Rhesus_A_Bta-webfont.eot');
src: local('☺'), url('WC_Rhesus_A_Bta-webfont.woff') format('woff'), url('WC_Rhesus_A_Bta-webfont.ttf') format('truetype'), url('WC_Rhesus_A_Bta-webfont.svg#webfont1KkdLMuc') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'WCRhesusBBtaItalic';
src: url('WC_Rhesus_B_Bta-webfont.eot');
src: local('☺'), url('WC_Rhesus_B_Bta-webfont.woff') format('woff'), url('WC_Rhesus_B_Bta-webfont.ttf') format('truetype'), url('WC_Rhesus_B_Bta-webfont.svg#webfont9MCWWyZz') format('svg');
font-weight: normal;
font-style: normal;
}
div#content h1.fontface
{
font: 40px/28px 'WCRhesusABtaRegular', Arial, sans-serif;letter-spacing: 0;
}
div.blurbBox
{
font-family: 'WCRhesusABtaRegular', Arial, sans-serif;
font-size:20px;
line-height:25px;
}
</code>
Tell ya what it could be...
How are you including your stylesheets? Are you using the $this->getStyleSheet() approach? Maybe your links to the fonts are not correct... Do you have FireBug installed in Firefox? Have a look at the Net panel and see if it's managing to load your fonts correctly. If it isn't, it should give you the full URL that it thinks the font is on, which should help you debug...
Jon
How are you including your stylesheets? Are you using the $this->getStyleSheet() approach? Maybe your links to the fonts are not correct... Do you have FireBug installed in Firefox? Have a look at the Net panel and see if it's managing to load your fonts correctly. If it isn't, it should give you the full URL that it thinks the font is on, which should help you debug...
Jon
Hi Jon, yes I use firebug, though didn't know about net panel, do now though - thanks.
code is:
<link rel="stylesheet" type="text/css" href="<?php echo $this->getStyleSheet('css/main.css');?>" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->getStyleSheet('css/typography.css');?>" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->getStyleSheet('css/rightSideBar.css'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->getStyleSheet('css/fontface.css');?>" />
code is:
<link rel="stylesheet" type="text/css" href="<?php echo $this->getStyleSheet('css/main.css');?>" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->getStyleSheet('css/typography.css');?>" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->getStyleSheet('css/rightSideBar.css'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->getStyleSheet('css/fontface.css');?>" />
Ok, but in FireBug, can you see the call to your font?
Make sure you clear the panel - hit refresh and then look for your fontnames. Hover over them and you will get the full URL to the font. Check if that is correct...
Jon
Make sure you clear the panel - hit refresh and then look for your fontnames. Hover over them and you will get the full URL to the font. Check if that is correct...
Jon
Hi Jon all appears fine, the response is as follows:
@font-face {
font-family: 'CicleGordita';
src: url(http://localhost/concrete5.4.1_v3/themes/KappiBase_H42/css/'Cicle_Gordita-webfont.eot');
src: local('☺'), url(http://localhost/concrete5.4.1_v3/themes/KappiBase_H42/css/'Cicle_Gordita-webfont.woff') format('woff'), url(http://localhost/concrete5.4.1_v3/themes/KappiBase_H42/css/'Cicle_Gordita-webfont.ttf') format('truetype'), url(http://localhost/concrete5.4.1_v3/themes/KappiBase_H42/css/'Cicle_Gordita-webfont.svg#webfontaZe7ilT6') format('svg');
font-weight: normal;
font-style: normal;
@font-face {
font-family: 'CicleGordita';
src: url(http://localhost/concrete5.4.1_v3/themes/KappiBase_H42/css/'Cicle_Gordita-webfont.eot');
src: local('☺'), url(http://localhost/concrete5.4.1_v3/themes/KappiBase_H42/css/'Cicle_Gordita-webfont.woff') format('woff'), url(http://localhost/concrete5.4.1_v3/themes/KappiBase_H42/css/'Cicle_Gordita-webfont.ttf') format('truetype'), url(http://localhost/concrete5.4.1_v3/themes/KappiBase_H42/css/'Cicle_Gordita-webfont.svg#webfontaZe7ilT6') format('svg');
font-weight: normal;
font-style: normal;
Not sure I fully understand what you've pasted in there... The Net panel should just give you URL's. Have you added those URL's to the previous code?
http://localhost/concrete5.4.1_v3/themes/KappiBase_H42/css/'Ci...
That URL, for example, will never work as it has apostrophes around the font name.
The reason for me wanting to check this, is because usually, the $this->getStyleSheet() function parses your stylesheets and adds /themes/KappiBase_H42/ to the start of all your url() statements. So if your fonts are contained inside a css folder (/themes/KappiBase_H42/css/fontname) then your @font-face code needs to reference the font address starting from the base of your theme directory.
In code, that would probably look like this:
Make sense? the difference is the css/ at the start of the url()
Jon
http://localhost/concrete5.4.1_v3/themes/KappiBase_H42/css/'Ci...
That URL, for example, will never work as it has apostrophes around the font name.
The reason for me wanting to check this, is because usually, the $this->getStyleSheet() function parses your stylesheets and adds /themes/KappiBase_H42/ to the start of all your url() statements. So if your fonts are contained inside a css folder (/themes/KappiBase_H42/css/fontname) then your @font-face code needs to reference the font address starting from the base of your theme directory.
In code, that would probably look like this:
@font-face { font-family: 'WCRhesusBBtaItalic' src: url(css/WC_Rhesus_B_Bta-webfont.eot); etc...
Make sense? the difference is the css/ at the start of the url()
Jon
Thanks jon but I think I'll give this a miss for now. Have deadline to make and am using C5 as a trial for company website. I removed the quotes as mentioned and even used an absolute reference to the css folder but still not working.
again thanks for all you help
again thanks for all you help
That's a shame. If it was on a publicly accessible site I could probably get it working for you in 2 minutes flat, but debugging is difficult when you can't see the site!
Jon
Jon
@jbx Thanks soo Much!!
I was killing myself with this problem for two days. Some browsers did render my fonts, some didn't!
After trying your suggestion with FireBug I found that some of my font URL is not correct, while some is. Weird. I then put every single font URL on its own "src" line. Now it works! :)
But I'm still not totally sure what the "local.." sentence is standing for. Do you maybe know?
Here is my code example!
I was killing myself with this problem for two days. Some browsers did render my fonts, some didn't!
After trying your suggestion with FireBug I found that some of my font URL is not correct, while some is. Weird. I then put every single font URL on its own "src" line. Now it works! :)
But I'm still not totally sure what the "local.." sentence is standing for. Do you maybe know?
Here is my code example!
@font-face { font-family: 'LeagueGothicRegular'; src: url('fonts/leaguegothicsumniki-webfont.eot'); src: local("‚ò∫"), url('fonts/leaguegothicsumniki-webfont.svg#LeagueGothicRegular') format('svg'); src: url('fonts/leaguegothicsumniki-webfont.eot?#iefix') format('embedded-opentype'); src: url('fonts/leaguegothicsumniki-webfont.woff') format('woff'), url('fonts/leaguegothicsumniki-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }
Using custom fonts isn't very difficult in C5.
Here's the file structure I use to have theme-specific custom fonts, and it is working quite well so far:
/themes/<theme_name>/css/
- <font>_define.css
- <font>.eot
- <font>.svg
- <font>.ttf
- <font>.woff
- style.css (my primary style sheet)
Here is an example from one of my font definition files -- league_gothic_define.css:
Here's an example of me using this rule in style.css:
Some items of note:
- I've implemented the SiteHtmlHelper class for loading stylesheets.
- I've added custom MIME types in my .htaccess files for a site to handle the various browser errors (except of course Chrome's one little gnarly).
I've also included a copy of:
/themes/<theme_name>/elements/header.php files so you can see how I'm using SiteHtmlHelper to manage "clean" loading of assets.
I learned it from these guys (way smart, and cool to be sharing like this...makes me really want to use the tool):http://www.onehat.com/blog/2010/03/concrete5-mod-flexible-js-and-cs...
Please feel free to contact me if you have questions.
Benjamin
Here's the file structure I use to have theme-specific custom fonts, and it is working quite well so far:
/themes/<theme_name>/css/
- <font>_define.css
- <font>.eot
- <font>.svg
- <font>.ttf
- <font>.woff
- style.css (my primary style sheet)
Here is an example from one of my font definition files -- league_gothic_define.css:
@font-face { font-family: 'LeagueGothicRegular'; src: url('League_Gothic-webfont.eot'); src: local('âº'), url('League_Gothic-webfont.woff') format('woff'), url('League_Gothic-webfont.ttf') format('truetype'), url('League_Gothic-webfont.svg#webfontFHzvtkso') format('svg') font-weight: normal; font-style: normal; }
Here's an example of me using this rule in style.css:
h1 { color:#555555; font-size:28px; font-family:'LeagueGothicRegular', Helvetica, Arial, sans-serif; line-height:100%; }
Some items of note:
- I've implemented the SiteHtmlHelper class for loading stylesheets.
- I've added custom MIME types in my .htaccess files for a site to handle the various browser errors (except of course Chrome's one little gnarly).
I've also included a copy of:
/themes/<theme_name>/elements/header.php files so you can see how I'm using SiteHtmlHelper to manage "clean" loading of assets.
I learned it from these guys (way smart, and cool to be sharing like this...makes me really want to use the tool):http://www.onehat.com/blog/2010/03/concrete5-mod-flexible-js-and-cs...
Please feel free to contact me if you have questions.
Benjamin
Hi What do you mean by added custom MIME types to your htaccess? i'm having some font nightmares and hope this will help resolve the issues, thanks
Ben
Ben
Okay, I have to ask. What browser are you using? Firefox is having know issues with @font-face. Try pulling up your site in Chrome or Safari or even IE. See if that is it. Worst case scenario, I use to use font-squirrel but I recommend using "google.com/webfonts" Let me if that is the issue or proceed to this temp fix.
With @font-face use the full urls such as
With @font-face use the full urls such as
url("http://font-hosting-site.com/where the file is");
Ok, apparently I jumped to early. I then rechecked every browser and found some issues with IE.
Then I reinserted the original code I found on the internet
and now suddenly everything works. Since I've checked almost every solution the last two days there must be something else now suddenly working... or?
But I found an issue with the fonts in my auto-nav. They are kinda boldy. I this is a known issue... how can this be resolved?
These fonts are really killing me.
Then I reinserted the original code I found on the internet
@font-face { font-family: 'LeagueGothicRegular'; src: url('fonts/leaguegothicsumniki-webfont.eot'); src: url('fonts/leaguegothicsumniki-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/leaguegothicsumniki-webfont.woff') format('woff'), url('fonts/leaguegothicsumniki-webfont.ttf') format('truetype'), url('fonts/leaguegothicsumniki-webfont.svg#LeagueGothicRegular') format('svg'); font-weight: normal; font-style: normal; }
and now suddenly everything works. Since I've checked almost every solution the last two days there must be something else now suddenly working... or?
But I found an issue with the fonts in my auto-nav. They are kinda boldy. I this is a known issue... how can this be resolved?
These fonts are really killing me.
In your CSS, set the font weight to normal.
font-weight:normal;
Wow, now I figured something amazing.
All @font-face fonts worked just fine in all browsers but then after I updated my css the fonts again suddenly collapsed. Then I went back to figure out what happened with the css. What broke the fonts was the Dreamweaver command to "auto-indent" the code. Oh my. I would never guess that.
Since there is no particular difference in the @font-face after the auto-indent, except that the last "src" line is written in one line without breaks. But apparently that is what causes problems.
All @font-face fonts worked just fine in all browsers but then after I updated my css the fonts again suddenly collapsed. Then I went back to figure out what happened with the css. What broke the fonts was the Dreamweaver command to "auto-indent" the code. Oh my. I would never guess that.
Since there is no particular difference in the @font-face after the auto-indent, except that the last "src" line is written in one line without breaks. But apparently that is what causes problems.
Jon