How to Customize Text in a Facebook App

Rules for Designing with Text

You’ve built your app, but something’s just not right. It’s the text! Maybe you applied a Theme and you don’t like the font style or color. Or maybe you simply want to know how to style your text. I’ll show you where to find the CSS to change this and give you some quick tips.

Let’s roll!

Even if you have the Default Theme applied, you will need to override any CSS in order to style your text. How do you find that you may ask? It’s easy. Click the CSS Editor button (right next to the Widget Editor button). Now, you will see two tabs. One says “Custom CSS” and one says “Theme CSS.” Click on the Theme CSS tab. There are two imported style sheets here. One is importing all the very basic styles. The second is the style sheet for whatever theme you have applied. Highlight just the URL for the style sheet. Right click and choose to open in another tab or window.


Now scroll through about 1/3 of the way down. What you’re looking for is the section titled /* TEXT*/

It’s going to look something like this:


This has everything you need – the general font styles for the entire app, headline styles, links styles and divider lines.

Depending on what you’re wanting to change, you can copy and paste this whole section or, if you’re just wanting to change the headlines,  simply copy the “h1” portion. You will paste this into the Custom CSS Tab of the CSS Editor. You can now make any changes you want and they will appear live in the preview. We’ve included call-outs to make it as clear as possible what each bit of the CSS is for. If you have questions, of course you can ask us.

Rules for Designing with Text
Table of Contents

Get started today!