Help with label font in CSS

[nickp87]

Having some trouble with a form i am creating. I am trying to style the labels to match the font of the rest of the site, but i am unable to get the labels to accept it.

If i use one of the built in fonts (sans-serif, fantasy etc) it uses them and changes font, but trying to use my own (edge fonts and google fonts) does nothing.

The fonts work on the rest of the site and i have checked there is nothing overriding it in the css.

Code looks like this

#modalform #label1 {
    position: absolute;
    top: 2px;
    left: 0px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-family: 'Exo 2';
}

Any help appreciated.

Edit to include link and apologies for the rushed thread start.

Link to the site is http://portfolio.innofydesign.com/Andrews/, if you scroll to the bottom and click the email link a modal box will pop up with the form.

The form is processed and displayed via PHP, let me know if you need any specific code but hopefully the link should help.

The font i am trying to use is the same as the text in the rest of the page and is called in the CSS with FFNettoWebPro.

[WebMachine]

We’re going to need more than just that little bit of code to see what is going on. Sometimes the way the different CSS rules interact with each other will affect the end result, and a bit of CSS really is not of much use without the html.

Could you please post the html and css for a working page which contains this form.

[coothead]

Hi there nickp87,

the code that you have supplied is insufficient for
members here to observe you problem.

Is it possible that you could help us to help you.

[edit]@WebMachine has typed a litle quicker than I.
[/edit]

coothead

[ronpat]

Hello, nickp87,

Have you considered specificity as a possible cause of the problem?

#modalform #label1 {

I’ve never seen a winning argument for using more than one ID in a selector.

Why aren’t you using classnames instead of ID’s, anyway?

[nickp87]

Hi ronpat.

The form itself was made with simfatic forms ( I may even just create the forms again with my own code.) and this is the code it produced, i simply targeted the id’s it created.

I will look into changing them now and see if that helps

Also added a link to the page in my original post.

Thansk

[ronpat]

Please focus on “specificity”. One ID “outweighs” all of the classes on a web page. You may need an ID in the form, but the font can still be chosen by targeting a classname or even the tag (element) in the form rather than the ID. If the default font is ID dependent, then specificity may be the problem.

Something to consider.

[Mittineague]

@ronpat

I’ve never seen a winning argument for using more than one ID in a selector.

Neither have I and I’ve seen a lot of unconventional writing styles. (including my younger BASIC self
I tend to be over-specific with selectors, I usually try to do the least amount of DOM traveling)

Is it possible that there should be a comma there?

#modalform, #label1 {

[PaulOB]

Hi,

Your modal is an iframe so you will need to include a link to the font files inside the iframe code just like you have done with modalform.css which is contained within the iframe itself.

<iframe frameborder="0" src="//portfolio.innofydesign.com/Andrews/modalform.php?sfm_from_iframe=1" width="100%" height="100%"></iframe>

Iframes do not inherit code from their parent frames.

[nickp87]

Thank you Paul, you were absolutely correct.

I have decided to remove this form now and just create my own, there is just to much unneeded code.