Font-family list

hi guys I have just began learning front end and I can not find the list of font family types
Can you share the list if you already have it ??

Hi, Kamol10,

if you google “font family,” you can find many type, but I like to use “GoogleFonts.” They have a lot of font there.

thank you for your help MihoMyojin but there is one problem how can i use that googlefonts in my sublime could you instruct me?

Hi, Kamol10,

I’m not sure what is “sublime,” but here is what I do.

When you open GoogleFonts page, you will see many font list.

  1. Select the font you like and click the “+” button on the upper right corner.
  2. You will see a tab of your selected font family on your lower right.
  3. Click the “-” button on this tab.
  4. You will see the code there, so just copy the code and put it into the <head> of your HTML document and CSS.

If you select “Roboto”, it looks like this :

<head>
<link href=“https://fonts.googleapis.com/css?family=Roboto” rel=“stylesheet”>
</head>

In CSS, if you want to apply this font to p tag, it looks like this :

p {
font-family: ‘Roboto’, sans-serif;
}

As you can see, there are 2 font type in font-family property; Roboto and sans-serif. If the browser does not support the first font, it tries the next font, and so on. So in this case, if the browser didn’t suppoet “Robot,” then sans-serif will be used.

You can also look at Google Fonts guide page.This guide explains how to use the Google Fonts API to add fonts to your web pages. : https://developers.google.com/fonts/docs/getting_started

2 Likes

Is Sublime your text editor? Your code doesn’t change between text editors if that’s what you’re thinking. @MihoMyojin did a good job of explaining. Here’s what W3C Schools has to say about it in the relevant reference page:

Definition and Usage
The font-family property specifies the font for an element.

The font-family property can hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font.

There are two types of font family names:

family-name - The name of a font-family, like “times”, “courier”, “arial”, etc.
generic-family - The name of a generic-family, like “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”.
Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

W3C is always the place to look first when you need a reference for syntax, the potential values you can assign to properties, stuff like that. Like, I always forget the syntax for stylesheet links when I haven’t done web dev in a while, so that’s where I look to find the right example :slight_smile:

1 Like

thank you all for your help
I got that