Why isn't arial black displaying?

[Johnnymushio]

#title {
display: inline;
font: 14px arial black;
margin: 0 50px 0 50px;
padding: 0;
text-align: left;
}


<div id="title">
<a href="/">Japan Town</a> > News<br>
</div>

page: http://japantown.awardspace.com/news/

[coothead]

Hi there Johnnymushio,

the font shorthand does not include color as an attribute. ;)
These are the allowable values...

font: [font-style] [font-variant] [font-weight] [font-size/line-height ] [font-family ]
...so color must be independently specified.

coothead

[Johnnymushio]

The font is named "Arial Black", regardless of which color it is.

I tried putting it in quotes, separating it from the font-size, nothing seems to work.

[coothead]

Hi there Johnnymushio,

I apologize for misunderstanding your problem, I forgot that 'arial black' was a font. :o

Nevertheless, on testing, all of my browsers rendered 'arial black' in your code as expected. ;)

Are you sure that you have it on your hard drive?

coothead

[Johnnymushio]

You know, I just checked and I don't, which I do not understand because I know I see arial black on several sites and it always stands out to me. I tried setting font-weight to "bolder" but I just can't seem to nail the look I see elsewhere. I'll keep trying I guess, thanks.

[traq]

in addition, when a font name is more than one word, it needs to be quoted.
font: 'arial black';(that's probably why coothead thought you were specifying the Arial font and black color.)

[Johnnymushio]

Okay, I found the font I was looking for on this threads page. Is it not arial black? Any font buffs here know the name/style/type of font this is on this page?

(at the top)

Dynamic Drive Forums > General Coding > CSS
Reload this Page Why isn't arial black displaying? <---

[traq]

no, actually it's regular Arial inside a <strong> tag.

[Johnnymushio]

Ah, you're right. I tried the strong tag before but I thought it wasn't the same, but it is.

Is there a way to use strong with css instead of html?

also, to get that style of font, not only should it be wrapped in strong tags, but it needs a font-weight of bold as well.

[jscheuer1]

Best you can do:


font: bold 14px 'arial black', arial, sans-serif;

The rest is up to the browser and the installed fonts of the user.

Are you worried about the words 'Japan Town' though? Those are in an a tag. So the style rules for the a tag would apply if different from the id="title' selector.

[Johnnymushio]

I decided to just put the bolded word in it's own separate div, since I did not want everything in the title bolded like that. I just wasn't sure if there was a way to put "strong" and "bold" in the css at the same time.

[traq]

<strong> is an html tag, not css. It means the text inside the element is more important than the surrounding text. (However, browsers almost always make it bold to show its importance.)

The main practical difference between using <strong>text</strong> and #text{ font-weight: bold; } is that the latter doesn't change its importance (it could simply be bold for stylistic reasons, and might not be more important than anything else on the page).