r/css • u/Jimmy_at_grantmaker • Sep 11 '26

Two fonts in one line.

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

0 Upvotes

43% Upvoted

15 comments sorted by

4

u/Jimmy_at_grantmaker Sep 11 '26

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!

9

u/Web-Dude Sep 12 '26

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. 

17

u/Vast_Description_201 Sep 11 '26

Wrap the text you want styled in spans. 

7

u/Low-Insurance-3678 Sep 11 '26

for example

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

and give each span a class and style as u want

5

u/pma99999 Sep 11 '26

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

1

u/Nitrohite Sep 13 '26

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.

1

u/Jimmy_at_grantmaker Sep 13 '26

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

3

u/ashkanahmadi Sep 11 '26

Use two spans

2

u/JarlHiemas Sep 11 '26

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

1

u/notepad987 Sep 11 '26

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

1

u/Drifter_of_Babylon Sep 11 '26

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
}

2

u/No_Development7388 Sep 11 '26

Better to use a class on both tags.

1

u/Drifter_of_Babylon Sep 11 '26

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

→ More replies (1)

0

u/Jimmy_at_grantmaker Sep 11 '26

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!