search

billpatrianakos / matvre

Mature is an open source blog theme that isn't tied to any one CMS or framework
Other
13 stars 9 forks source link

Fanwood italic not displaying in Safari/Chrome #1

Open timlockridge opened 11 years ago

timlockridge commented 11 years ago

I'm not sure if this is a problem with the font-face declaration, but the Fanwood italic font doesn't seem to be rendering on webkit browsers (working fine with Firefox, though). I love your work on this theme, and I've been making my own customization, but I can't figure out the italic problem. I noticed this also occurs on your blog, when viewed with Chrome. Any ideas?

billpatrianakos commented 11 years ago

Can you tell me what OS and browser version you're using? I've seen strange things happen occasionally in Chrome but refreshing the page has fixed it for me. The last update to Chrome made it act up but the problem mysteriously went away.

I'm betting this has to do with the web font declaration. I'm not using a standard declaration to get around some issues with Chrome. I wrote about the details here http://billpatrianakos.me/blog/2012/12/26/fix-webfont-rendering-issues-in-chrome-for-windows/

If you can give me some more details and, if you've got some extra time, try switching to the normal webfont declaration shown in that link that would be awesome. Either way I'm going to check this out and see what I can do to fix it soon.

billpatrianakos commented 11 years ago

If you pull the latest changes from master you'll see I changed the webfont declaration in the fonts.less and _fonts.scss files. If you import that into then compile the main style.less/scss file Fanwood Italic should start working again just by declaring font-style: italic.

I'm at work so I haven't had time to test this so if you get to it before me let me know.

timlockridge commented 11 years ago

I'm using Chrome (v26.0.1410.43) & Safari (v6.0.3) in Mac OS 10.8. I too thought that updating the font-style & @font-face declarations would do the trick, but (at least for me) it doesn't seem to be working. I'm still muddling my way through the styling of octopress, so this could be a problem entirely on my end. Have you pushed these changes to your blog? I've been keeping an eye on your installation as benchmark, specifically this post:

http://billpatrianakos.me/blog/2013/03/29/fraction-dot-less-2-dot-0-beta/

I'm attaching screenshots from Chrome & Firefox of the phrase "Boilerplate Redux" in that post, which has an em tag around it. Firefox, italicized; Chrome, no luck.

Chrome

Firefox

I'm still trying to work through this on my end. I love this theme, and I'm making some changes for my own use. I'll fork my project, but if I can figure out this problem I will submit a pull request sooner. At the moment, however, it is really puzzling me!

billpatrianakos commented 11 years ago

This really helps me. The version on my blog is behind the master branch. It's using the version of the theme from about 2 or 3 commits ago. The problem with Chrome may be the order of the font file declarations. I had to put them out of order as a workaround for another Chrome font rendering issue.

I would try to use the static HTML/LESS/CSS version of the theme for testing. That's what I'll be doing when I get into work today. The static, non-Octopress version of the theme is just easier to mess with and test, at least for me. I'll update when I know more.