HTML Font Family
Introduction
We pay great attention to selecting typefaces for design, both for writing genres and topics. Using a specific typeface sends a subconscious message in terms of psychology. A font can express whimsy, horror, or romance. Selecting the appropriate font is a crucial and initial step toward ensuring the usability and accessibility of your website. The formatting of the text influences the readability of your designs and web pages.
How HTML Font-Family Works?
An element, such as <h1>, which would set the font for Header 1, can have its font specified via the font-family property.
The font-family attribute can store several font names to support various browsers, some of which may only support specific fonts. If the first font is not supported, the browser will attempt to use the next font.
Two Types of Font Family Names
- family-name: The name of a family of fonts, e.g., "arial," "times," "courier," etc.
- generic-family: A generic family's name, such as "cursive," "sans-serif," "serif," "fantasy," or "monospace."
When arranging a font family within your HTML, begin with the fonts that you find most appealing and conclude with a standard family. This enables the browser to select a font from the generic family that is similar in case no other fonts are available. Remember that a comma must always be used to separate each font value.
Typeface Terminology
Let us first talk about some of the most popular and widely used font types that are supported by modern browsers.
The Serif font type
Small, intricate features at the extremities of the letters are what distinguish serif fonts from other types.
Serifs are little strokes used as flourishes at the end of a character's main strokes.
Serif typefaces have historically been commonly employed in print because they are thought to be readable for extended text passages. However, their screen display is only sometimes optimal.
Serif fonts are regarded as some of the most attractive, conventional, and classic typefaces available.
The Sans-Serif font type
This type of typeface is highly readable and clear, and it also gives the impression of a clean design.
The characters in this typeface appear sharp and flat with clear lines because each letter has a straight end and no stroke at the edge.
Sans-serif fonts are more readable on high-resolution computer screens and are modern, minimalistic, and current.
The Monospace font type
The letters of this font type are evenly spaced apart and have a set width.
The width of each letter varies in the font types we have already covered.
Because of this, every letter in the monospace typeface is the same width. Designs are clean and have a mechanical sense as a result of the text aligning properly and being easy to follow.
The most commonly used typefaces are the ones listed above, while there are two additional general font types: fantasy (Fonts are decorative) and cursive (Fonts imitate human handwriting).
How to choose a font for your website – font names
It is time to examine the numerous variations of font styles found within each family now that we have covered the fundamentals of font terminology and descriptions.
Below is a list of some popular styles found in each font family:
Serif Fonts
- Georgia
- Times
- Times New Roman
- Bodoni
- Garamond
- Palatino
- ITC Clearface
- Plantin
- Freight Text
- Didot
- American Typewriter
Sans-Serif Fonts
- Arial
- Verdana
- Helvetica
- Geneva
- Tahoma
- Trebuchet MS
- Open Sans
- Liberation Sans
- Impact
Monospace Fonts
- Courier
- MS Courier New
- Monaco
- Lucinda Console
- Andalé Mono
- Menlo
- Consolas
How to Use the Font-family Property?
The font-family property in CSS specifies a particular font for an element as well as the appearance and rendering of its text content.
For the font-family property, the syntax is as follows:
element {
font-family: value;
}
After writing the property font-family, we insert a space, a colon (:), a value, and a semicolon (;) to finish the specification.
The property we wish to target must be set, and the desired value must be assigned.
How to Set a CSS Font?
Browsers display headings and paragraphs in the font of their choice when no style is applied, or the font-family property is explicitly set to a value.
Times New Roman is a serif font that is used by default in Google Chrome.
There are several methods for selecting a different typeface and providing us with the desired font.
It is important to keep in mind that websites only use a small selection of typefaces when selecting a font, which is the value portion. The fonts that are already installed on the user's PC will be taken by them.
Only when a typeface is pre-installed on a user's machine will a browser display it.
How to Use a Generic Font-family Name?
In this instance, the names are keywords that fall under one of the previously discussed font types (serif, sans-serif, monospace).
This is how it would appear:
p {
font-family: serif;
}
The typeface is now set to a standard serif font.
How to use a specific font-family name?
p {
font-family: Times, serif;
}
This rule selects Times as the preferred font and serif as a general backup in the event that the user's machine does not have the first option installed.
You must surround any white space in the name with quotation marks.
p {
font-family: "Courier New", monospace;
}
As a backup, monospace is added, and the typeface is set to Courier New.
It is necessary to provide the browser with a fallback if we select a font other than one of the generic names (such as serif or sans-serif).
How to Use a Font-stack?
The font-family property has several values in this instance.
It is a list of font family names that you can use in text, ranked and separated by commas. All of the fonts are alternatives. This ensures maximum compatibility with operating systems and browsers.
Priorities in the list are arranged from highest to lowest priority, from left to right.
p {
font-family: "Lucida Console", Courier, monospace;
}
You can establish a preferred order by using multiple font-family names. We begin by selecting the desired typeface.
If the user's browser does not support the first option or if the user does not have it installed on their machine, the browser switches to the second font and uses it. If that one is likewise unavailable, the third font is used, and so on.
Although it is best practice to list three or four fonts, we can list as many as we like.
There is usually a generic typeface listed at the end as a backup option in case something goes wrong.
The generic name ensures that anything in the requested font-family will be rendered, and the browser must support at least one of the options from the listed group.
p {
font-family: Georgia, "Times New Roman", Times, serif;
}
A font stack is made up of the fonts you have listed.
Initially, the browser will search for Georgia. If the font is installed, it will be shown in the browser. On the left, it will search for Times New Roman. If it is likewise unavailable, the default serif family font will be displayed.
Incorporating a font-family into HTML
A certain font can be used in another way. We may add a font or font family inline within the HTML without additional CSS code. The Span element is used for this purpose.
<span style="font-size:150%;font-family:Arial,sans-serif">Arial</span>
HTML Span Etiquette
Because HTML is so unstable, if any of the guidelines are broken, web content may show improperly.
If you are developing HTML for the Span Element, keep the following in mind.
Always keep in mind that you must open and close each HTML element in the manner shown below:
<span style=”color:blue;”> text here </span>
Additionally, it would help if you enclosed each Style (or collection of styles) you use in your Span Element in quotes.
Additionally, be careful to divide your Styles apart by a semicolon. In this instance, font size and font family are being kept apart.
Use commas to divide fonts. Here, Arial and sans-serif are being distinguished from one another.
Utilizing <Span> to Style Inline Text
The inline Span Element can be seen in the code sample that follows. We are free to style any text in this example. Rather than generating a range of CSS styles, we insert this element anyplace we'd like the text to appear and set the font to your choice.
Example code:
<html>
<body>
<span style="font-size:150%;font-family:Arial,sans-serif">Arial</span>
</body>
</html>
In the end, you will be able to use any font you want inside the HTML line that is compatible with your web browser.