Interrresting! Just figured out C5's auto-nav block interferes with @font-face
Permalink 2 users found helpful
I was confused at what the problem was in my last site I did with C5 last week. Suddenly, out of the blue, my @font-face styling looked choppy and pixelated in Safari. But, why? I never did figure it out.
Just now, I swapped out my ULs for the Header Nav code:
<?php $a = new Area('Header Nav'); $a->display($c); ?>
...and voila! The fonts got all choppy everywhere.
Swapped the ULs back in (removed the Header Nav code) and ...
voila! Fonts not jagged anymore.
Anyone have any idea why this happens? @font-face tested EXTREMELY well across all browsers prior to integrating with C5. I checked through browsershots.org as well as various computers and browsers at work.
(screenshot to follow below...)
Just now, I swapped out my ULs for the Header Nav code:
<?php $a = new Area('Header Nav'); $a->display($c); ?>
...and voila! The fonts got all choppy everywhere.
Swapped the ULs back in (removed the Header Nav code) and ...
voila! Fonts not jagged anymore.
Anyone have any idea why this happens? @font-face tested EXTREMELY well across all browsers prior to integrating with C5. I checked through browsershots.org as well as various computers and browsers at work.
(screenshot to follow below...)
Anyway, I'm not sure WHY Header Nav does this (only in Safari, as far as I know), but I did find an alternate way of doing it that seems to work.
How I solved it last time...
How @font-face standard accepted practice is SUPPOSED to look (but C5 Header Nav screws it up in Safari)...
The major difference (apart from the fact I am referencing 2 different fonts here) is this bit:
src: local('☺')
^ The smileyface is supposed to guarantee better @font-face compatibility with Safari and this is the standard code FontSquirrel will give you when you use their popular @font-face generator. Strangely, C5's Header Nav somehow makes this less compatible with Safari.
How I solved it last time...
@font-face { font-family: "Chunkfive"; src: url("Chunkfive.eot"); src: local("ChunkFive"), url("Chunkfive.woff") format("woff"), url('Chunkfive.otf') format('opentype'), url("Chunkfive.svg#Chunkfive") format("svg"); font-weight: normal; font-style: normal; }
How @font-face standard accepted practice is SUPPOSED to look (but C5 Header Nav screws it up in Safari)...
@font-face { font-family: 'TitilliumText14LRegular'; src: url('titilliumtext1-webfont.eot'); src: local('☺'), url('titilliumtext1-webfont.woff') format('woff'), url('titilliumtext1-webfont.ttf') format('truetype'), url('titilliumtext1-webfont.svg#webfontve1CcHJ2') format('svg'); font-weight: normal; font-style: normal; }
The major difference (apart from the fact I am referencing 2 different fonts here) is this bit:
src: local('☺')
^ The smileyface is supposed to guarantee better @font-face compatibility with Safari and this is the standard code FontSquirrel will give you when you use their popular @font-face generator. Strangely, C5's Header Nav somehow makes this less compatible with Safari.
Switching my navigation from the "Header Nav" custom template to the normal (view) template solved my jagged font issue. I was already using getThemePath so this was the only solution I found to the problem. Thanks for pointing that out zoinks.
One of the things I used the Header Nav custom template for was it's classes on the first and last li element of the navigation. So, without those classes, you can still reliably target those two elements via CSS 2.1:
Apologies for bumping an old thread. Hope this helps.
One of the things I used the Header Nav custom template for was it's classes on the first and last li element of the navigation. So, without those classes, you can still reliably target those two elements via CSS 2.1:
#example li:first-child { whatever: xyz; } /* the first one */ #example li:last-child { whatever: xyz; } /* the last one */
Apologies for bumping an old thread. Hope this helps.
just a tip for anyone else trying to get the @font-face thing to work, for me it wasn't functioning when the css file was being called with getStyleSheet (even with absolute URLs on the fonts):
<link rel="stylesheet" media="screen" type="text/css" href="<?=$this->getStyleSheet('typography.css')?>" />
I had to do this instead:
<link rel="stylesheet" media="screen" type="text/css" href="/themes/inneroptics/typography.css" />
here's a couple of helpful links on the subject:
http://sixrevisions.com/css/font-face-guide/...
http://paulirish.com/2009/bulletproof-font-face-implementation-synt...
and here's a whole bunch of free commercial use font-face kits:
http://www.fontsquirrel.com/fontface...
<link rel="stylesheet" media="screen" type="text/css" href="<?=$this->getStyleSheet('typography.css')?>" />
I had to do this instead:
<link rel="stylesheet" media="screen" type="text/css" href="/themes/inneroptics/typography.css" />
here's a couple of helpful links on the subject:
http://sixrevisions.com/css/font-face-guide/...
http://paulirish.com/2009/bulletproof-font-face-implementation-synt...
and here's a whole bunch of free commercial use font-face kits:
http://www.fontsquirrel.com/fontface...
Tony, this is a bit dangerous because it disabled the css customizer as well!
Might cause some support requests..
Might cause some support requests..
good point remo. wonder why concrete's getStyleSheet() kills @font-face support.
First of all, this discussion saved me lots of time, thanks to all!
I think I found why the $this->getStyleSheet() isn´t working with font-face. I analized the different stylesheets generated by using each one of the methods(by using the chrome´s “inspect element” tool). The result showed that in the fonts.css when using this->getStyleSheet() instead of $this->getThemePath() the url for the src inside the font-face is changed/injected with the full url to the them folder.
I got it to work by setting the src url in font-face as if the file was at the root folder of the theme.
For example:
I have in my themes directory:
MyTheme/css
MyTheme/fonts
So in the fonts.css inside the font-face tag, the src was: src: url('../fonts/myfont.ttf')
I changed it to: src: url(' to 'fonts/myfont.ttf' ) and it all worked.
Well just wanted to share this for anybody who is out there getting in to this same trouble. (FYI: twitter bootstrap v3 uses glyphicons for icons, which use font-face... changed this and it all worked)
Cheers!
Pancho
I think I found why the $this->getStyleSheet() isn´t working with font-face. I analized the different stylesheets generated by using each one of the methods(by using the chrome´s “inspect element” tool). The result showed that in the fonts.css when using this->getStyleSheet() instead of $this->getThemePath() the url for the src inside the font-face is changed/injected with the full url to the them folder.
I got it to work by setting the src url in font-face as if the file was at the root folder of the theme.
For example:
I have in my themes directory:
MyTheme/css
MyTheme/fonts
So in the fonts.css inside the font-face tag, the src was: src: url('../fonts/myfont.ttf')
I changed it to: src: url(' to 'fonts/myfont.ttf' ) and it all worked.
Well just wanted to share this for anybody who is out there getting in to this same trouble. (FYI: twitter bootstrap v3 uses glyphicons for icons, which use font-face... changed this and it all worked)
Cheers!
Pancho
The same method is actually recommended on the Performance page of the documentation.
Rather than hard-coding the path, however, you can use this:
... as opposed to this:
The first method (or the hard-coded path) works because it doesn't get cached by c5 like getStyleSheet does. It's the server-side caching that is throwing off the font-face, I think.
It would be interesting to try it with base 64 encoded fonts embedded right into the stylesheet, too.
Rather than hard-coding the path, however, you can use this:
<?php $this->getThemePath(); ?>/my_stylesheet.css
... as opposed to this:
<?php $this->getStylesheet('my_stylesheet.css'); ?>
The first method (or the hard-coded path) works because it doesn't get cached by c5 like getStyleSheet does. It's the server-side caching that is throwing off the font-face, I think.
It would be interesting to try it with base 64 encoded fonts embedded right into the stylesheet, too.
Tony, once again, thank you!
it worked out ok using getStylsheet on fontspring's fonts. had to delete the standard url quotes though to get them to show up.
@font-face { font-family: 'SpringsteelLigRegular'; src: url(fonts/springsteel-lig-webfont.eot); src: local('☺'), url(springsteel-lig-webfont.woff) format('woff'), url(springsteel-lig-webfont.ttf) format('truetype'), url(springsteel-lig-webfont.svg#webfont) format('svg'); font-weight: normal; font-style: normal; }
Thanks Mario. This drove me nuts!
I wonder if this should be treated as a C5 bug. The CSS validates with and without the url quotation marks.
I wonder if this should be treated as a C5 bug. The CSS validates with and without the url quotation marks.
Hi
Having read this thread, is there a way that C5 support we use the @font-face tag and fonts generated by fontsquirel?
Thanks
Having read this thread, is there a way that C5 support we use the @font-face tag and fonts generated by fontsquirel?
Thanks
I can't get @font-face to work in a site I am building at all. tried all these methods!!
Driving me nuts!
Driving me nuts!
Scrap that. This worked:
<?php echo $this->getThemePath()?>/typography.css
Did not first time.
<?php echo $this->getThemePath()?>/typography.css
Did not first time.
And correct implementation of that is...
<link href='<?php $this->getThemePath(); ?>/stickyfooter.css' rel='stylesheet' type='text/css' />
... right?
<link href='<?php $this->getThemePath(); ?>/stickyfooter.css' rel='stylesheet' type='text/css' />
... right?
figured out the problem... disregard my questions.
This style switcher works perfectly, by the way:
<?php if ($c->isEditMode()) {
//if its in editmode ?>
<link href="<?php echo $this->getThemePath() ?>/stickyfootereditmode.css" rel="stylesheet" type="text/css" />
<?php } else {
//if its not in editmode ?>
<link href="<?php echo $this->getThemePath() ?>/stickyfooter.css" rel="stylesheet" type="text/css" />
<?php } ?>
My problem was something really annoying in my template which had nothing to do with font-face linking or anything.
This style switcher works perfectly, by the way:
<?php if ($c->isEditMode()) {
//if its in editmode ?>
<link href="<?php echo $this->getThemePath() ?>/stickyfootereditmode.css" rel="stylesheet" type="text/css" />
<?php } else {
//if its not in editmode ?>
<link href="<?php echo $this->getThemePath() ?>/stickyfooter.css" rel="stylesheet" type="text/css" />
<?php } ?>
My problem was something really annoying in my template which had nothing to do with font-face linking or anything.
no double quotes are better, and you needed an echo statement for php.
<link href="<?php $this->getThemePath(); ?>/stickyfooter.css" rel="stylesheet" type="text/css" />
could you please type exactly what I need? I can't decipher what "you needed an echo statement" means. I see no echo in the line you just gave me.
I fixed it for you in my code, I was just saying what I changed.
Zoinks! You are a freakin' GENIUS!! Thank you! That always bugged me!
You can view it here more clearly:http://www.concrete5.org/files/8912/7593/4885/header-nav-jagged.gif...