0

I'm using the following CSS to attempt to style a text box (aka label) in iAd Producer's iBooks Author widget builder. I'm building from the blank template, not HTML. Here's the (very basic!) CSS code that's causing issues:

.title {
    font-family: Times New Roman;
    font-weight: bold;
    font-style: italic;
   -webkit-box-shadow: 0 0 15px 5px rgba(255, 255, 190, .75);
}

All properties are applied except font-family. The weird thing is that if I build from the HTML template, I can style text boxes using this CSS with no issues whatsoever.

Any ideas why font-family isn't being applied?

Mikawa Ben
  • 76
  • 10

2 Answers2

0

Put quotes around "Times New Roman";.

Also, check your CSS for any rules later in the stylesheet that may be overriding the font-family property.

rnevius
  • 26,578
  • 10
  • 58
  • 86
  • tried the quotes but no result. I should have mentioned that I had already done that. The way that iAd Producer works means that there is no other CSS to edit. For each project there's a Global.css file which is where you put code you want to overwrite anything else in the project. Except, this is not overwriting the font. There's nothing else at all in Global.css at this point. – Mikawa Ben Nov 02 '14 at 10:23
0

After a couple of weeks more experience working with CSS in iAD Producer, I think I have an answer. Any styling that is added using the inspector panel will overwrite anything in the Global.css file even if it is subsequently reset.

I concluded this after discovering the following significant issue with CSS in iAd Producer: any styles on labels applied using the inspector will overwrite anything in Global.css even if, and this key, the inspector-applied styles are deleted afterwards.

Leave a label's inspector properties untouched and assign it a class name. You will then be able to style it's background colour, say, using Global.css. But if you first or subsequently assign a background colour using the inspector panel this will overwrite the Global.css even if you subsequently set the background to None in the inspector panel. I assume this is because it is literally applying a background-color: none property to some hidden CSS file somewhere in the background.

Why the original question font isn't being applied now makes sense: as all text labels are by default created with Helvetica Neue as a font, applying another font has to be done via the drop down in the inspector panel, not CSS. One workaround for this is achieve by importing custom fonts into the assets panel for this purpose.

Mikawa Ben
  • 76
  • 10