How to change the font family in CSS

Arif Billah Babu

          

  CSS



Image not found!!

In CSS (Cascading Style Sheets), you can change the font family of text on a webpage using the font-family property. This property allows you to specify a prioritized list of font family names or generic font family names. The browser will use the first available font in the list.

Here's an example of how you can use the font-family property:

css
/* Using specific font family names */

body {
  font-family: "Arial", sans-serif;
}



/* Using generic font family names */

h1 {
  font-family: serif;
}



/* Using multiple font family names as a fallback */

p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

In the examples above:

  • The first example sets the font family for the entire body element to Arial. If Arial is not available, the browser will use a sans-serif font.

  • The second example sets the font family for all h1 elements to a generic serif font.

  • The third example sets the font family for all p elements to "Helvetica Neue". If "Helvetica Neue" is not available, it falls back to Helvetica, then Arial, and finally to a generic sans-serif font.

You can specify multiple font family names separated by commas. The browser will try to use the first font in the list, and if it's not available, it will move on to the next one.

It's important to note that if the font family name contains spaces, it should be enclosed in double or single quotation marks.

You can apply the font-family property to various HTML elements to control the typography throughout your webpage.




=== Happy Coding :)

Category List