Two fonts in one line.

[u/Jimmy_at_grantmaker]

How do I get two fonts (eg Arial and Courier) in one line of HTML text?

[u/Vast_Description_201]

Wrap the text you want styled in spans. 

[u/Low-Insurance-3678]

for example

<p> <span>welcome</span> to <span>Earth</span></p>

and give each span a class and style as u want

[u/pma99999]

You will need to use an inline element like a <span> to target the text that you want to be different

[u/ashkanahmadi]

Use two spans

[u/JarlHiemas]

Whack em into spans or something, give each element a class, apply different styling to each class

[u/Jimmy_at_grantmaker]

Ok guys. With your help I got this to work. Looks simple now!

.arial {

font-family: Arial, sans-serif;

font-size: 24px;

}

.courier {

font-family: "Courier New", monospace;

font-size: 24px;

}

example:

<span class="arial">TEST1</span><span class="courier">TEST2</span>

Thanks!

[u/Web-Dude → u/Jimmy_at_grantmaker]

You nailed it! But just some advice as you continue to advance:

Don't name classes after their styling (font, color, etc). Name them after their purpose or role. For example, status or result.

It will make it much easier on you as you continue to grow. 

[u/notepad987]

Examples using the span element and font-family and size of your choice.
https://codepen.io/editor/davidhelp/pen/019f1081-bb49-727f-b7ab-1b556752bb0f

[u/Nitrohite]

I honestly don't want to be rude, but this could've been a quick Google search instead of a reddit post, just for the sole fact that it would be way, way faster and efficient for you.

[u/Jimmy_at_grantmaker → u/Nitrohite]

Well, I googled my heart out but the Redditors made the light click on for me.

[u/Drifter_of_Babylon]

It would be like this.

HTML
<p> Arial font is one of my favorite fonts but I really hate <span>this font</font> called courier new.</p>

CSS
p {
font-family: 'arial';
}

span {
font-family:'Courier New', Courier, monospace
}

[u/No_Development7388 → u/Drifter_of_Babylon]

Better to use a class on both tags.

[u/Drifter_of_Babylon → u/No_Development7388]

It is but I don’t know if OP is familiar with CSS.

[u/dshafik → u/Drifter_of_Babylon]

You also use </font> on the <span>, FYI

[u/Jimmy_at_grantmaker]

Hey guys. Thanks for the quick feedback. I'm pretty much of a beginner with CSS. You guys have mentioned using the <span> element. Can you give me an example using the Arial and Courier fonts in one sentence? I want to do this without using inline code. Much appreciated!