Jump to content
Sign in to follow this  
WebWerx

Font Stuff

Recommended Posts

WebWerx

It's font day! What can I say? I have started styling specific areas of our site and noted a peculiarity with respect to fonts. For example, I have assigned "Alfa Slab One" here: http://cl.ly/0K2i2q3W2d0z2z1y1L0T (top of site if you want to see my CSS). It renders perfectly only when I have "Alfa Slab One" assigned in the PageLines Control Panel (to any font setting): IE Text Headers or Primary Font. If it is not assigned, then the font does not render correctly. This is probably normal as Wordpress is not being told anywhere that I am using Alfa Slab One. So my question (I was getting to it) is where is the best place to assign fonts in order to get non PageLines assigned fonts to render correctly?

Share this post


Link to post
Share on other sites
Rob
Fontastic! First, you need to change [code]letter-spacing: -0.05em;[/code] to [code]letter-spacing: 0.05em;[/code] as it bunches up too tight for such a thick font. Next, the font size for "Get Conversions" is just a tiny bit too big as it causes the phrase to wrap in Firefox but not in IE, proving that fonts render differently in various browsers. To answer your question, you applied it correctly to the specific CSS element where you want to place it. Now this is a bit tricky if things are wrapped in common elements such as H1-H6 tags or anything else that's using site CSS. I think Jenny's working on the answer for that in your other topic, as I write this. Using Firebug, I went to the .phone CSS and replaced the Alfa font with Georgia to test and then looked elsewhere through the page. Nothing else changed, so evidently, applying fonts to specific elements works. Hope that helps.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
WebWerx
You are one thorough Chef @rangelone: "Ork Ork Ork!" (http://goo.gl/ag13w) Point 1: I agree with you on the Letter spacing. It's what was in the design. However my Designer uses Kerning (Kern 25pt.). So if you have a handy tool that converts things over to CSS -speak I'd be grateful! I could have very well done it incorrectly as I don't do letter & line spacing that often. I'll fix it. I was more concerned about how things are applied, not the aesthetics. And If I recall I tossed in a bold selector on the font when I was working on my rendering issue. So it will end up being removed as it was not in her spec. I did see the text wrap on the last box. I figured I'd get things right by going from 38pt to 36pt on the font... (Don't tell my designer!) Point 2: Yes I did see Jenny's answer in my e-mail, and have answered her. She is basically telling me what I thought needed to be done. Point 3: Applying fonts to specific elements will only work if that font set is assigned in the Pagelines settings. I have proven that by changing a number of different site fonts away from Alfa Slab. As soon as I do it, the styling (Which worked) disappears and I go to the secondary assigned font. Jenny has provide me with an appropriate answer in my other Post. If I am lucky, she will even let me see her custom.css! (LOL) - where I will learn the vagaries of "font bastardization". :-h

Share this post


Link to post
Share on other sites
catrina
I don't know of any handy tool that converts things over to CSS-speak but letter-spacing is the equivalent to kerning in typography, so you're definitely using the right approach.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×