Font-family list

Font-family list
0.0 0

#1

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 ??


#2

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.


#3

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


#4

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


#5

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:


#6

thank you all for your help
I got that