The Complete WebDeveloper (47 Blogs) Become a Certified Professional

How To Best Utilize Fonts In CSS?

Last updated on Dec 13,2019 435 Views

This article will introduce you to a simple yet an important topic that is Fonts In CSS and will also give you a practical demonstration on the subject. Following pointers will be covered in this article,

Web sites carry content in the form of images, audio, video and textual content. However, most web pages still rely on text as the predominant format. This is because plain text offers some very significant advantages.

Non-intrusive readability – You want to check the latest match score while at office. Obviously you want a quick text update, not a noisy video!
Low network bandwidth requirement – Text content can be loaded even in poor internet connectivity areas, while rich media cannot.
Search friendly – Web sites always keep an eye on how easily their content gets noticed on search engines. Text is best suited for this, at least until AI completely takes over the internet!

While formatting text content, web designers have only few parameters to work on – font, alignment, highlighting and color. Selecting the right font for your text is a critical choice. The standard practice is to use CSS font tags to define fonts for text in HTML pages.
If you are new to the world of HTML programming, get a basic starter tour here. You might want to read up on the CSS basics before getting on with learning about CSS fonts.

For a comprehensive CSS tutorial, visit Edureka CSS Tutorial For Beginners. You will get an excellent heads-up on the way CSS is to be used to augment HTML web design.

Moving on with this article on Fonts in CSS

Fonts in CSS

A font is basically a set of characteristics associated with the display of text. Fonts are differentiated from one another by their size, indentation, width, slant and so on. Let’s begin with a basic text display in different fonts.

Example 1: Headings and paragraph in various fonts

<!DOCTYPE html>
background-color: lightblue;
font: bold 30px arial, sans-serif;
font: 15px verdana;
font: italic bold 12px/30px Georgia, serif;
<h1>The first heading in Arial font</h1>
<h2>The second heading in Verdana font</h1>
<p>The paragraph in italic bold Georgia font</p>
Example 1: Output

Output- Font in CSS- Edureka

In Example 1, we have 3 different lines of text in different fonts. You would notice that each of the fonts vary in their character widths, indentations, etc.

Moving on with this article on Fonts in CSS

Attributes in CSS Font

CSS Fonts have 4 primary attributes – style, weight, size and family. The style attribute denotes normal or italic. The weight shows the font as plain or bold. Weight can also be expressed numerically. The size is simply the font size; bigger the size, larger the text in appearance. There are multiple ways in which font size can be assigned, detailed descriptions are given in later sections. The family attribute is to assign the font name to the text.

In Example 1, we have used different font names for the headings and paragraph. Under the h1 and p tags, we see two font names listed, while the h2 tag names only one font. This is the definition of a font family, more about this later.

Moving on with this article on Fonts in CSS

font-style attribute:

The two primary styles can be set are ‘normal’ and ‘italic’. Italics are supposed to be cursive in nature with a slant. Normal is the default option which is straight. There is another less used option called ‘oblique’, which resembles the italic option in most fonts. You can also set the style to ‘inherit’ so that it takes the font style from its parent element.

Example 2: Font style options
  font-family: verdana;

font-style: normal;

font-size: 15;

Verdana normal font
  font-family: verdana;

font-style: italic;

font-size: 15;

Verdana italic font 
  font-family: verdana;

font-style: oblique;

font-size: 15;

Verdana oblique font

Moving on with this article on Fonts in CSS

font-weight attribute:

This attribute decides whether the font should appear thick or thin. It can be set to ‘normal’ or ‘bold’. Default value is normal. This value can also be set as numeric. Weight of 400 represents normal and 700 is for bold. There are few other settings (ranging from 100 – very light to 900 – very bold), but they are not supported by all fonts. All the weight options are shown in Example 3.

Example 3: Font weight options
  font-family: verdana;

font-weight: normal;

font-size: 15;

Verdana normal weight
  font-family: verdana;

font-weight: bold;

font-size: 15;

Verdana bold weight
  font-family: verdana;

font-weight: 500;

font-size: 15;

Verdana numeric weight

Moving on with this article on Fonts in CSS

font-size attribute:

The size attribute can be set in multiple ways. Let’s list down these ways below.
● Enumerated value such as ‘medium’, ‘large’. In fact just like sizes of clothing, the values can range from XX Small to XX Large!
● Set relative to its parent element, as ‘larger’ or ‘smaller’.
● Percentage of the parent element’s size.
● Set as ‘inherit’ to directly adopt the size of the parent element.
● As absolute value in the units of px (pixels), pt (points) or cm (centimeter)
‘Medium’ is the default value set for this parameter.

Moving on with this article on Fonts in CSS

font-family attribute:

In HTML, the CSS font family is for setting the font name. You can either just put a single font name with the tag. Or you can assign multiple values as a font-family list that defines the priority in which the browser should choose the font.
The list is prioritized from left to right, in the form of a fall-back system. The first value if available is chosen, or control goes to the next one, until the end of the list is reached. The default font family is defined by the browser preferences.
CSS font families are of 2 types – generic families and font families.
● Generic families – based on some general characteristics, fonts are grouped as ‘serif’, ‘sans serif’, ‘monospace’, etc. For instance, Sans serif means fonts without the serif style.
● Family names – fonts belonging to specific family hierarchies. Times, Arial, Courier are all font families and Times New Roman is an example font of the Times family.
The various font family usage options are listed in Example 4 below.

Example 4: Font family options
  font-family: verdana;Verdana single font
  font-family: “Times New Roman”, Times, Courier;Times New Roman followed by font families
  font-family: Arial, monospace, sans-serif;Arial followed by generic families

Some common points to note

● Like several other CSS properties, some of the font settings vary in different browsers. Check for browser support before using some rare font settings.
● You can set font settings separately using the individual tags of font-style, font-weight, etc. Alternatively if you prefer compact code, you can use the shorthand font attribute with all values in the same line.
● In user scenarios where you want the font to vary in size depending on the browser size, there is a useful font size setting called responsive font setting. It can be set with a vw unit, which means “viewport width”. That way the text size will follow the size of the browser window.

Hope you found the information you were looking for on Fonts In CSS. Do share your experience with us in the comments section below. Happy designing!

If you’re interested in learning more about web-development, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you Learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3). 

Upcoming Batches For Web Developer Certification Training Course
Course NameDate
Web Developer Certification Training Course

Class Starts on 28th May,2022

28th May

SAT&SUN (Weekend Batch)
View Details
Web Developer Certification Training Course

Class Starts on 6th August,2022

6th August

SAT&SUN (Weekend Batch)
View Details

Join the discussion

Browse Categories

Send OTP
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

How To Best Utilize Fonts In CSS?