CODEWITHSUNDEEP
htmlcss
Sonny Black
Sonny Black

Reputation: 1617

Is it possible to have multiple fonts in one div?

For example, in one line there will be 2 different fonts for different words.

i.e

(typeworthy) This is a (helvetica) test

Typeworthy being on 'This is a' and helvetica being on 'test'. Not sure how to do this though - I've tried using different div classes but that puts the words on different lines.

Can this be done?

Update:

view:

  <span class="font1">We</span> <span class="font2">LOVE</span>
   <span class="font3">Flappy Bird</span><span class="fontone">so much<div id="space">we made <span class="fonttwo">FLAPPY</span>, the toy game controller!</span></div>

css:

.font1{

    font-family: 'boxyfont';
    text-shadow: -1px -1px white, -1px 1px white, 2px -1px white, -1px -1px white;
    margin-top:10px;
    display:block;
    float:left;
}

.font2{
    font-family: 'noteworthy';
    padding: 4px 10px 4px 10px;
    color: white;
    font-weight: bold;
    text-shadow: 1px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
    margin-top:-10px;
}

Upvotes: 3

Views: 12102

Answers (6)

Ajones
Ajones

Reputation: 1

Use a <span> tag inside the div. 

<div style="font-family:Times">
    This is text in Times New Roman.
    <span style="font-family:sans-serif">
        <br/> This is in sans-serif.
    </span>
</div>

Fiddle Example

Upvotes: 0

user2864740
user2864740

Reputation: 61975

Only one value of any particular CSS attribute, including fonts, may be applied per element. (The CSS specifity rules determine exactly which value is applied, but it can be only be a single value and there are no "sub element" CSS rules.)

As others have pointed out, there can be many different (non-div/inline) elements within the div - these individual elements can themselves have different CSS values applied.

Inspecting the SO markup for "code text" reveals that it uses many spans for the different colors (different values for a single CSS attribute), which can be considered different fonts for the same of argument.

For instance, 

(typeworthy) This is a (helvetica) test

Is rendered as the following, where each class rule may have a different color (think: font) applied.

<code>
  <span class="pun">(</span>
  <span class="pln">typeworthy</span>
  <span class="pun">)</span>
  <span class="pln"> </span>
  <span class="typ">This</span>
  ..
</code>

Upvotes: 0

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

Here try this fiddle

<div>
    <span class="font1">Hello</span> <span class="font2">World</span> !
</div>

.font1{
    font-family:serif;
}
.font2{
    font-family:sans-serif;
}

Upvotes: 5

user1534664
user1534664

Reputation: 3418

div {
   font-family:Arial;
}
span {
   font-family:Verdana;
}

<div>
    some text
    <span>some other text</span>
</div>

Upvotes: 1

aw04
aw04

Reputation: 11187

Put a span tag around each section where the font is specified, and keep them in the same div.

Upvotes: 0

Renato Zannon
Renato Zannon

Reputation: 29981

Use a span:

<p>
  <span class="typeworthy">This is a</span> <span class="helvetica">Test</span>
</p>

Then, configure the two classes on your css.

You might want to use the <em> instead, if the reason for the difference is to give emphasis.

Upvotes: 6

Related Questions