(HTML) How do i use 2 custom fonts in a page?

Question

I am new to HTML5 coding, and i am looking to create a very basic website. I've been searching on the internet for a few hours wondering how i can use a custom font on a webpage through a font file (.tff) and i came out short of solid answers. All i can conclude is that i require a style.css file of some sort with information of the font i wanna use. While i am still unable to figure out how i can get the font to display on my webpage, what i really don't know is how i can use 2 different custom fonts on a webpage. Of all the vague answers i could find on the internet, they only tell me how to use a single font for a webpage, however i would like to use 2 different fonts for different paragraphs and such. I still cannot figure out how to do so, what i could find teaches me how to do so in CSS format, though i am using HTML format (specifically 5). I would like some help on how i can use 2 custom fonts in a webpage for different paragraphs and how i can have these fonts display when i open the .html file on my browser. I would appreciate the help.

This is a bit like asking "how do I put two paragraphs on one page?" You start with the first, then add the second. Don't over-think it. — ceejayoz, Jun 13 '17 at 21:41
@ceejayoz That's true. But the question is also about using CSS within an HTML page and not just using two fonts instead of one. — Alaa Mahmoud, Jun 13 '17 at 22:49
HTML5 is just the version of HTML, and it just adds new features. You probably don't need to mention the 5. HTML and CSS go hand-in-hand, and you will almost always use both; HTML is for content (i.e. text, images, etc.), CSS is for styles (colours, fonts, positions, etc.) and JavaScript is for interactivity (buttons, animations, etc.). Go start with an HTML/CSS tutorial such as [this one](https://www.codecademy.com/en/tracks/htmlcss). — Clonkex, Jun 13 '17 at 23:56

score 3 · Accepted Answer · answered Jun 13 '17 at 21:44

You have to use CSS to do that. That CSS can embedded in your html under your tag

<html>
  <head>
   <style>
      @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
      @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}
      @font-face { font-family: Delicious2; src: url('Delicious2-Roman.otf'); } 
      @font-face { font-family: Delicious2; font-weight: bold; src: url('Delicious-Bold.otf');}
   </style>
   </head>

Then you can reference these fonts in your html

<font face="Delicious">This is some text!</font>

Check these two posts for more details

How do I install a custom font on an HTML site

https://www.w3schools.com/tags/att_font_face.asp

Thank you so much, this is exactly what i was looking for. I appreciate it very much. — sodaddict, Jun 13 '17 at 22:11
Great. If this answers your question then please click the checkmark so that it's easier for other to find this answer. — Alaa Mahmoud, Jun 13 '17 at 22:47

score 0 · Answer 2 · answered Jun 13 '17 at 21:30

You need to first host the font on the website (put the TTF file in a folder beside your HTML files), then use CSS to apply it to the elements (Ex: your paragraphs, headers, etc.). Using this method, you can use two, three, or however many different fonts you like. W3Schools is sometimes really helpful, and this is an occasion where they are. I can elaborate more on this later.

score 0 · Answer 3 · answered Jun 13 '17 at 21:39

I believe all you want is to apply different font styles on your web page. First, host your fonts in your project and use CSS class to change font family to any section of the web page you like.

<div style:'font-family: fantasy'>This is font style 1</div> 
<div style:'font-family: cursive'>This is font style 2</div>

(HTML) How do i use 2 custom fonts in a page?

3 Answers3