Font family within a tag

Question

When I have an a tag within a div whose font-family is specified, the font-family seems to affect only the text within the div, but not the text within the a tag. Why is that, and how can it be fixed?

<div style="font-family: 'Times New Roman', Times, serif"> Hello world! <a href="www.google.com"> Click here! </a> </div>

You probably have a rule that overrides the div style. Use firebug to chrome dev tools to inspect that element and see what it shows you. — John Conde, May 11 '13 at 03:24
http://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css — Kevin Boucher, May 11 '13 at 03:27
The attribute `href="www.google.com"` is an odd example, since the value is a relative URL, very different from `http://www.google.com`. — Jukka K. Korpela, May 11 '13 at 06:54

score 1 · Accepted Answer · answered May 11 '13 at 03:28

1

As @John mentions in comment; you might have some other CSS linked file which is overriding your font-family. You can use inherit property inline, as your div also has style defined inline.

<a href="www.google.com" style="font-family: inherit;"> Click here! </a>

answered May 11 '13 at 03:28

hjpotter92

78,589
36
144
183

Using `inherit` is usually not a good idea, partly because it introduces a normally unnecessary browser dependency: `inherit` is not recognized by IE 7. – Jukka K. Korpela May 11 '13 at 06:52

score 0 · Answer 2 · answered May 11 '13 at 07:04

The problem described is not caused by the code posted, i.e. the cause is in the part of code that was not disclosed. Generally, setting e.g. font-family on an element affects as such only the text directly in the element, not text wrapped in an inner element. However, if there is no CSS rule (in author, user, or browser style sheets in use) for an inner element, then an inner element inherits font-family from its parent. But in this case there apparently is a CSS rule that sets font-family on the a element.

The fix depends on what other CSS code is used. This does not seem to be a real-life case but just as an exercise, so it’s better to use a different approach, e.g.

<div class="foobar"> Hello world! <a href="www.google.com"> Click here! </a> </div>

with the following CSS code in a linked external style sheet or within a style element on the page:

.foobar, .foobar a { font-family: 'Times New Roman', Times, serif }

Replace foobar by a name that reflects the meaning or role of the element, just to make the code more readable to humans.

However, depending on the other CSS code that sets font-family on the a element now, you may need to use a more specific selector, or the !important specifier, or both.

Font family within a tag

2 Answers2