Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to have multiple fonts in one div?

Tags:

html

css

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;
}
like image 792
Sonny Black Avatar asked Dec 28 '25 17:12

Sonny Black


2 Answers

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.

like image 146
Renato Zannon Avatar answered Dec 31 '25 09:12

Renato Zannon


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;
}
like image 33
Lokesh Suthar Avatar answered Dec 31 '25 08:12

Lokesh Suthar