The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> FF Ignores CSS
homeuser
post Apr 3 2016, 06:04 PM
Post #1





Group: Members
Posts: 5
Joined: 11-May 09
Member No.: 8,568



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.


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 3 2016, 08:14 PM
Post #2


.
********

Group: WDG Moderators
Posts: 7,730
Joined: 10-August 06
Member No.: 7



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



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
homeuser
post Apr 9 2017, 03:11 PM
Post #3





Group: Members
Posts: 5
Joined: 11-May 09
Member No.: 8,568



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 9 2017, 04:24 PM
Post #4


.
********

Group: WDG Moderators
Posts: 7,730
Joined: 10-August 06
Member No.: 7



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).

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st November 2017 - 06:09 PM