Help - Search - Members - Calendar
Full Version: FF Ignores CSS
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
homeuser
I am helping someone with a website. We want to have the first letter of the first paragraph larger and in a distinctive font.This is the CSS link:
<link rel="stylesheet" type="text/css" href="css/firstbigletter.css" />

This the external CSS:

.firstbigletter {
font-family:"Typo Upright BT", "Times New Roman", serif;
font-size:45px;
font-weight:normal;
line-height:80%;
letter-spacing:-6px;
}


Control Panel - Fonts shows that the first font is there (see attached). But FF won't recognize it and displays the letter in what appears to be Times New Roman . IE does recognize it and displays the first character in the Typo Upright. What must be done with FF to get it to properly use the CSS?

Thank you.
Christian J
Is the font spelled "TypoUpright..." or "Typo Upright..." with a space? According to the screenshot it seems to be the former. I don't know how common this font is on newer computers, if it's not common you may want to embed it with CSS.

BTW, what does the HTML of the paragraph's first letter look like? From the CSS I assume the first letter is contained in an HTML element with the CLASS "firstbigletter". Another idea is to combine the CSS :first-child pseudo-class (for the first P element) with the ::first-letter pseudo-element:

CODE
p:first-child::first-letter {font-family: impact;}

https://www.w3.org/TR/selectors/#first-child-pseudo
https://www.w3.org/TR/selectors/#first-letter

You can also make the CSS shorter by using the font shorthand property, but I personally keep forgetting the correct order of its values: https://www.w3.org/TR/css-fonts-3/#font-prop



homeuser
The font is spelled "TypoUpright BT". The problem was in spelling it as three words instead of two words. Now that is working properly and being selected. Question: How would I embed the font in the CSS, as you suggested? That would be quite helpful if other don't have that font.

There is also a problem in testing other fonts, using the TypoUpright BT as a secondary font. In this case, none of the fonts are recognized (it defaults to something plain):

font-family: "Palace Script MT", "TypoUpright BT", Gigi, Harrington;
font-family: Gigi, "TypoUpright BT", Harrington;

Any suggestions as to why these two don't work at all (Control Program shows all fonts on the machine).
Thanks
Christian J
QUOTE(homeuser @ Apr 9 2017, 10:11 PM) *

How would I embed the font in the CSS, as you suggested? That would be quite helpful if other don't have that font.

See e.g. https://developer.mozilla.org/en/docs/Web/CSS/@font-face

QUOTE
There is also a problem in testing other fonts, using the TypoUpright BT as a secondary font. In this case, none of the fonts are recognized (it defaults to something plain):

Do the browsers support the font file formats?

Also, maybe the fonts don't contain glyphs for the characters you want to use (some specialized fonts may only support numbers, upper-case letters, or similar).

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.