If you want to create a website professionally, you need to think about which fonts to use. We'll tell you which fonts HTML uses by itself, how you can integrate others and what you need to consider.
Small writing tables
Fonts are an important point in web design. Because it depends on the font how a website affects the user and whether he can read it at all. Because compared to print design, you have to consider the many different monitors and mobile devices for web design, the resolution of which can be, for example, 4K, HD or just VGA.
Serif fonts like "Times" and "Times New Roman" are less suitable for low-resolution screens than those without serifs like Arial and Verdana. The fonts are either located on the user's computer or have to be supplied by you. If the latter is the case, you must absolutely observe the license. In addition to free open source fonts, there are also chargeable fonts..
Existing HTML fonts
HTML itself does not have any fonts. The browsers use those that are preinstalled on the website visitor's computer. Under Windows this is "Times New Roman" by default, if no other font is specified in the HTML / CSS code. Basically, there may be deviations depending on the operating system used, since different fonts are installed on Windows, Linux and macOS.
If you want to specify a specific font for a section, alternatives should be added if the desired one is not installed on the computer. The following CSS entry uses "Times New Roman" as the font under Windows and alternatively "Times" under Linux, since "Times New Roman" is not installed by default here:
p { font-family: "Times New Roman", Times, serif; }
If the browser does not find any of the specified fonts, it uses a similar one..
Add fonts to HTML
When designing your website, you no longer have to rely solely on fonts that are installed on the viewer's computer. Because fonts that are accessible online can also be embedded in an HTML page. For example, you can find Google Fonts free open source designer web fonts that you can use without license costs.
The following example shows the integration of the "Roboto" font into a website. Insert the link to the font in the header of the website between <head> and </head> :
<link href=" https://fonts.googleapis.com/css?family=Roboto:300i " rel="stylesheet">
You then use CSS to assign the sections to which font to use. If, for example, "Roboto" is to be the standard font for all paragraphs, simply write the following entry in a CSS file or integrate it between the tags <style type="text/css"> and </style> in the header of the HTML page:
p { font-family: "Roboto", sans-serif; }
If the definitions are in an external CSS file, you have to include this file in the header of the HTML page:
<link rel="stylesheet" type="text/css" href="FontDatei.css">
Example 1
<!DOCTYPE html>
<html>
<head>
<title>Externe Fonts integrieren</title><meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Roboto:300i" rel="stylesheet">
<style type="text/css">
p { font-family: "Roboto", sans-serif; }
</style>
</head>
<body>
<h1>Überschrift im Standard-Font des Browsers</h1>
bla fasel
<p>Dieser Text wird in der Schriftart "Roboto" ausgegeben.</p>
</body>
</html>
