Forums

C5 font support in Chrome and Safari - Turn on font rendering?

Permalink
Hi I am having issues with fonts on a few sites, they all show up fine in Firefox, but pixel-ate in Chrome and Safari, however ONLY in C5. One theme I converted from a WP site and another from a less mainstream CMS, both of which used the same styles i have copied over, but now the site is in C5 the fonts are not displaying correctly, is there a way to turn on font rendering withing C5 or something?

Thanks, in advance... see what I mean here:

Old site:http://www.labordecpa.com/
New site C5:http://preview.labordecpa.com/
BHWW
 
mkly replied on at Permalink Reply
mkly
Maybe try unquoting your url() in your font.css so that C5 rewrites these to the proper locations

url(GuilfordRegular.eot);


Right now I don't think the browser can find these fonts.

There is a howto here that talks about using @font-face and Font Sqirrel. It might be easier to just redo that part through Font Squirrel.

http://www.concrete5.org/documentation/how-tos/designers/how-to-add...
BHWW replied on at Permalink Reply
BHWW
Thanks for that, however no joy, it can find the fonts as it shows the fonts, just a really badly rendered version of them. When i highlight them they render properly then 10-15 seconds later revert to the poorly rendered versions. Cheers anyhow.

Any other ideas out there?
mkly replied on at Permalink Reply
mkly
Have you tried redo'ing this in Font Squirrel. Wedkit OSX has some funny bits. This explains it a bit.

http://stackoverflow.com/questions/3698319/css-font-face-what-does-...

HINT: it's the local()'s
BHWW replied on at Permalink Reply
BHWW
Hi, I have tried that but now it's totally not working... something must be cached somewhere.... grrr
mkly replied on at Permalink Reply
mkly
You might want to try removing the quotes at this point. I think before you were using locals as the urls weren't working.
BHWW replied on at Permalink Reply
BHWW
Nope no joy, FontSquirrel includes the quotes and doesn't have the local statement i've added that as a trial, still no sucess however.

Thanks

B
mkly replied on at Permalink Reply
mkly
When you call getStyleSheet() in a Concrete5 theme it passes it to the CSS tools handler which looks for any url() tags and replaces them so that the url goes to the correct file. This does not fuction when there are quotes around the url()

I'm sorry I didn't make that clear with Font Squirrel. That howto should include that.

EDIT: You need to include the css with $this->getStyleSheet() for this to work.
BHWW replied on at Permalink Reply
BHWW
Thanks

Yep, All makes sense, but i've tried embeding with getStylesheet, getTheme, and a non-php based link, all with no effect.
mkly replied on at Permalink Reply
mkly
If you put the in the "fonts" folder you have to indlude this in the url()

example

url(fonts/guilfordlight-webfont.woff)
BHWW replied on at Permalink Reply
BHWW
Thanks, fonts aren't in folders.

any idea what one guy meant on here by: I've added custom MIME types in my .htaccess files for a site to handle the various browser errors.

Cheers
mkly replied on at Permalink Reply
mkly
idk about the MIME Types honestly. I've done what I've described here about 35 times with Font Squirrel. Just tested it again right now. It is possible that you have something else going on with you server.

I assume you added the full link right now? I browsed the site and it does appear to be working.

Anyhow, maybe you should file a bug report.

Best Regards,
Mike
BHWW replied on at Permalink Reply
BHWW
Thanks, Posted.

Cheers for the help, regards, Ben
adamjohnson replied on at Permalink Best Answer Reply
adamjohnson
This one drove me absolutely *#$^((& crazy for a while. I saw jagged edges on @font-face fonts via Google Web Fonts in Chrome on OSX. After checking into it for a while, I ran into this thread:

http://www.concrete5.org/community/forums/customizing_c5/interrrest...

It said mostly to not use getStyleSheet but instead to use getThemePath. I had been using getThemePath to no avail and was puzzled. Then, I saw that someone had posted that their custom autonav template was causing the fonts to render with jagged edges. I then changed my autonav's custom template to none ("view") and voila, no more jagged fonts across the entire page (well, almost. Still see it on occasion but it's mostly gone).

So, try removing any custom templates you have set on your autonav and see if that fixes it. If not, try removing other custom templates. That should do the trick. Let us know how you get on.
BHWW replied on at Permalink Reply
BHWW
Thanks riotaj

That is so weird, changing from the header_nav to standard view effects the fonts everywhere, it was mainly effecting my headings but now it's all resolved, weird bug!
VeggyMight replied on at Permalink Reply
I've run into this bug (jaggies on headers in Chrome) but I don't quite understand your solution. in2orbit can you describe what you did in more detail (which block/stack you changed)?
BHWW replied on at Permalink Reply
BHWW
Hi Veg

As Riotaj suggested i unselected the custom template that i was using on my headernav block, however this issue seems for e at least to have been resolved in C5.5. If you are not using the auto nav custom templates then i'm not sure i can be of any help.

Cheers