List Of Javascript Font Families

ast Python module | base64 Python module | code Python module | COM PHP module | dis Python module | Ev PHP module | exp | html Python module | http Python module | imp Python module | io Python module | JavaScript | os Python module | PS PHP module | Python functions | re Python module | select Python module | sep | site Python module | SPL PHP module | StackOverflow | time Python module | UI PHP module

Michael Zippo 04.11.2021

👻 Check our latest review to choose the best laptop for Machine Learning engineers and Deep learning tasks!

Formatting text on a web page is an important part of web design. For example, you might want the headers to appear in a specific font, or for all text on a page to use the serif font.

This is where the CSS font is located: the family comes into play. The CSS font-family property allows you to specify one or more font families that will be used to style the text on a page Web.

This tutorial will cover the basics by referring to examples of CSS font-family and how you can use the property to style text on a web page.

CSS Font Family

There are many aspects involved in styling a font in CSS, from setting a color to size. the police. One of the most important parts of a font style, however, is defining the font family, which is the style used by text on a web page.

Define the font family used by text on a web page, you can use the font-family property. The syntax of the font-family property is as follows:

The font-family property accepts a single font or a list of fonts. If you specify more than one character, you must separate each character with a comma.

The order in which the characters are displayed is the order in which the browser will attempt to apply the characters. The browser will default to the first font in the list that is installed or can be downloaded from the web browser. If this character is not available, the second character will be used, and so on.

It is important to note that the font-family property will select a font for each character in a block of text. Then, if a particular character is not available in a font, the The next font of your font in the family list will be tried, until a suitable character can be found.

When using font-weight, it is best to include at least one last name generic font (such as serif, sans-serif, or monospace). This ensures that if another font in the list is not available, the browser will still be able to select a font for the text on a web page to display.

There are two ways you can use the font-family property. First, you can use the property to specify a custom font for a web page. Second, you can use the property to apply a generic font family to text on a web page. The generic font families available for use with the font-family property are as follows:

• serif: Fonts use the serif font (eg Lucida Bright, Palladio).
• sans-serif: Fonts use the sans-serif font (eg Open Sans, Trebuchet MS).
• monospace: the characters are all the same width (eg minivan, Menlo).
• italic: the characters have a hyphen (eg Lucida Calligraphy).
• fantasy: Decorative fonts used to draw attention to fonts (eg Papyrus).

There are other generic font families available, which you can read in more detail in Mozilla CSS Font Family Documentation .

Now that we know the basics of the font-family property, we can look at some examples of how it works in action.

Examples of CSS Font Families

A local stamp asked us club, the Seattle Stamp Club, to customize the fonts for parts of their website.

First of all, we were asked to change the font of all the

headers on their "Contacts" page to use the "Open Sans" font. So, for example, the "Contact Us" on the "Contact Us" page of their website should appear in Open Sans. If this font is not available, the generic "sans-serif" family must be used. We could use the following code to do this:

Click " noscript> button in the code editor above to see the output of our HTML / CSS code.

In our HTML code, we have specified a header using an

tag which contains the text Contact Us . So in our CSS code, we used the font family to set the font for the

elements on our webpage.

The value we assigned to the property font-family sets the font for all

elements in Open Sans and, if this font is not available, the generic sans-serif family is used. To achieve this we have specified two characters, separated by a comma.

Now suppose we also want to apply a style to all the characters

elements of the page Contacts from the stamp club to use the Times font. If this font is not available, a default serif font should be used. We could use the following code to do this:

Click in the code editor above to see the output of our HTML / CSS code.

In our example, we have declared a paragraph of text using a

tag . Next, we define the font family of all

tags in our CSS stylesheet to use the Times and serif fonts. By default, the browser will try to display all

tags in the Times font. If this font is not available, the serif font is used.