Fonts are an integral and very important part of website design, emphasizing its individuality. The article will talk about connecting standard fonts to a web page, they are also called system fonts.
System, standard, safe fonts
Any browser displays only those fonts that are present in the operating system of the computer. Therefore, they are called system and are installed by default along with the operating system.
And they are called safe fonts, because with a high probability they will be displayed in the browser of most site visitors.
But the whole problem lies in the fact that different sets of fonts are installed on different operating systems. You can view the sets of supplied fonts along with the operating system on the official pages of Windows, Mac OS. And in Unix/Linux there is no standard set at all.
In order for the web page to be displayed in accordance with the designer's idea, a font property called font-family was set in CSS.
font-family font property
The font-family property - font families grouped according to certain criteria.
Generic families:- serif - fonts with serifs at the ends;
- sans-serif - sans-serif fonts;
- cursive - italic fonts;
- fantasy - decorative fonts;
- monospace - monospace font (with letters of the same width).
Thus, similar fonts from different operating systems are simply selected and connected to the web page separated by commas.
Here is an example, just for visual perception. We will return to this example when we consider directly connecting fonts.
Just follow the logic and everything will become very clear.
Body ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )
- OC Windows - Arial;
- OC Mac OS - Helvetica CY;
- OC Unix/Linux - Nimbus Sans L;
- The generic family is sans-serif.
So-called safe fonts
Based on OC Windows, a list of several safe fonts was compiled.
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
All of these fonts are installed on Mac OS X, Windows, and many Unix/Linux users who have the Core fonts for the Web package installed.
For other users, a correspondence table is provided. It picks up similar fonts belonging to a particular family.
Correspondence table and belonging of fonts to a particular family:
| Windows | MacOS | Unix/Linux | generic family |
|---|---|---|---|
| Arial Black | Helvetica CY | Nimbus Sans L | sans serif |
| Arial | Helvetica CY | Nimbus Sans L | sans serif |
| Comic Sans MS | Monaco CY | * (see below) | cursive |
| Courier New | * (see below) | Nimbus Mono L | Monospace |
| Georgia | * (see below) | Century Schoolbook L | Serif |
| Impact | Charcoal CY | * (see below) | sans serif |
| Times New Roman | Times CY | Nimbus Roman No9L | Serif |
| Trebuchet MS | Helvetica CY | * (see below) | sans serif |
| Verdana | Geneva CY | DejaVu Sans | sans serif |
* When connecting fonts, you can safely rely on it. The table supports Cyrillic characters, Russian alphabet.
Connecting system fonts to the site
If you need to connect the main font for the entire document, you just need to add the following code to the CSS style sheet:
Body ( /* connect the font to the entire document */ font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* additionally set the font size */ font-size: 16px; /* set the weight font, or instead of 400, set the value - normal */ font-weight: 400; )
And this is how system fonts are connected in Bootstrap 4 framework: Fonts are connected with the expectation of mobile devices.
Body ( font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; )
Assign a font for headings
H1, H2, H3, H4, H5, H6 - here it is similar, only we set the boldness value to highlight the headings:
h1, h2, h3, h4, h5, h6 ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* connect font to headings */ font-weight: 600; /* set boldness of the font, or instead of 600, set the value - bold */ )
Assign font to paragraphs only:
p ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; font-weight: normal; font-size: 16px; ) Line by line it looks like this:- We connect the font to paragraphs, it can be applied to li lists, div blocks, form forms and other elements;
- Set the boldness of the font, or instead of 600, set the value - bold ;
- Additionally, set the font size for paragraphs.
To assign a font to a specific paragraph only, or block, you must first assign a class to this block in the HTML document:
Here is the paragraph with the included font
And in the CSS table write the following code:
Main-font ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; font-weight: normal; font-size: 16px; )
Now, each html element tag with the .font class (call it whatever you like) will be assigned an Arial font, normal (400), bold, and 16px in size.
Similarly, you can assign different fonts to li lists, table tables, entire div blocks, individual words, or phrases.
Including fonts directly in an HTML document
Directly in an HTML document, fonts are connected in the same way as a CSS file, the difference is only in the syntax. You can include fonts in the title of the document - between tags
(similar to a CSS file), or inline - assigning properties directly to html tags.Adding fonts to the header, between tags
. To do this, add the following code to the html document:
Everything is similar to connecting in a CSS file.
Connecting fonts inline
Directly to site elements. Here are some examples:
Connecting the font to the paragraph
Here is a paragraph with text
Highlight a single word in bold and assign a font separate from the main oneHere is a paragraph with text, and this word to be highlighted in bold
We highlight the link in bold and assign a font separate from the main oneThis is plain text Here link is also plain text
Similarly, we assign fonts to any html tag.
Note - System Fonts in Bootstrap 4
The developers of the famous Bootstrap 4 Framework include fonts in the following way so that almost any device uses its standard, system fonts.
Body ( font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; )
This list contains fonts that are common to all current Windows operating systems (actually starting with Windows 98) and their Mac OS equivalents. Such fonts are sometimes referred to as "browser safe fonts" ( browser safe fonts). This is a little reference book that I use when I make Web pages and I think it will be useful for you too.If you're new to web design, you might be thinking something like, “Why should I limit myself to such a small selection of fonts? I have a huge collection of beautiful fonts!” The fact is that the visitor's browser can display only those fonts that are installed in his operating system ( approx. translator: currently it is already possible to apply virtually any fonts in page design using CSS 3 and its new property @font-face; however, not all browsers support this function yet), which means that every the visitor to your page must be the owner of the fonts you have chosen. Therefore, you should only use fonts that are available on each operating system. Luckily, CSS has a property @font-family, which makes this task easier.
List
| Meaning of @font-family | Windows | Mac | Family |
|---|---|---|---|
| Arial, Helvetica, sans-serif | Arial | Arial, Helvetica | sans serif |
| "Arial Black", Gadget, sans-serif | Arial Black | Arial Black Gadget | sans serif |
| Comic Sans MS cursive | Comic Sans MS | Comic Sans MS 5 | cursive |
| "Courier New", Courier, monospace | Courier New | Courier New, Courier 6 | monospace |
| Georgia, Serif | Georgia 1 | Georgia | serif |
| Impact, Charcoal, sans-serif | Impact | Impact 5, Charcoal 6 | sans serif |
| "Lucida Console", Monaco, monospace | Lucida Console | Monaco 5 | monospace |
| "Lucida Sans Unicode", "Lucida Grande", sans-serif | Lucida Sans Unicode | Lucida Grande | sans serif |
| "Palatino Linotype", "Book Antiqua", Palatino, serif | Palatino Linotype, Book Antiqua 3 | Palatino 6 | serif |
| Tahoma, Geneva, sans-serif | Tahoma | Geneva | sans serif |
| "Times New Roman", Times, serif | Times New Roman | Times | serif |
| "Trebuchet MS", Helvetica, sans-serif | Trebuchet MS 1 | Helvetica | sans serif |
| Verdana, Geneva, sans-serif | Verdana | Verdana, Geneva | sans serif |
| symbol | Symbol 2 | Symbol 2 | - |
| webdings | Webdings 2 | Webdings 2 | - |
| Wingdings, "Zapf Dingbats" | Wingdings 2 | Zapf Dingbats 2 | - |
| "MS Sans Serif", Geneva, sans-serif | MS Sans Serif 4 | Geneva | sans serif |
| "MS Serif", "New York", serif | MS Serif 4 | New York 6 | serif |
1 The Georgia and Trebuchet MS fonts ship with Windows 2000/XP and are included in the IE font package (and indeed are included with many Microsoft applications), so they are installed on many Windows 98 computers.
2 Symbol fonts are displayed only in Internet Explorer, in other browsers they are usually replaced with a standard font (although, for example, the Symbol font is displayed in Opera, and Webdings - in Safari).
3 Book Antiqua is almost identical to Palatino Linotype; Palatino Linotype comes with Windows 2000/XP and Book Antiqua comes with Windows 98.
4 Please note that these fonts are not TrueType but bitmap so they may look bad at some sizes (they are designed to display at 8, 10, 12, 14, 18 and 24 pt at 96 DPI).
5 These fonts only work in standard fonts in Safari, but don't work in bold or italics. Comic Sans MS also works in bold but not in italics. Other Mac browsers seem to be fine emulating missing font properties on their own (thanks to Christian Fecteau for the tip).
6 These fonts are only installed on the Mac during the Classic install
Screenshots
- Mac OS X 10.4.8, Firefox 2.0, ClearType enabled (thanks to Juris Vecvanags for the screenshot)
- Mac OS X 10.4.4, Firefox 1.5, ClearType enabled
- Mac OS X 10.4.11, Safari 3.0.4, ClearType enabled (thanks to Nolan Gladius for the screenshot)
- Mac OS X 10.4.4, Safari 2.0.3, ClearType enabled (thanks to Eric Zavesky for the screenshot)
- Windows Vista, Internet Explorer 7, ClearType enabled
- Windows Vista, Firefox 2.0, ClearType enabled (thanks to Michiel Bijl for the screenshot)
One of the main tasks of web design is the selection of the right standard fonts. Font embedding services such as Google Web Fonts or Typekit have been created as an alternative to provide something new.
They are very easy to use. Let's take the Google Web Fonts service as an example.
Choose Open Sans , Droid Serif or Lato font. Write code and paste it into an element HTML document. Everything is ready to be referenced in CSS! The whole process took no more than 60 seconds. And everything is completely free.
What could be wrong?
Some font may not be available to everyone. And that means there could be problems. You are happy that you chose a beautiful font for the site, and the web page visitor sees ugly scribbling instead.
This will not happen if you implement a backup option.
How important is the use of safe web fonts?
Each device has its own set of preinstalled fonts. Which one depends on the operating system. The trouble is that there are slight differences between them.
What about sites? For example, this one? The font that you see may not be the one that was originally prescribed for the site.
What does it mean? Let's say that the designer has chosen some family of paid fonts for the site. If you do not have them installed and are not provided by a special web service, then the font that you see is one of the standard options. For example, Times New Roman.
Therefore, on your screen, the text may look just awful.
And here standard fonts for the site available on all operating systems. This is a small collection available on Windows, Mac, Google, and Unix and Linux.
With this selection, designers as well as site owners can specify which font should be used as a fallback. Thus, it becomes possible to control how the page will look on different devices.
As a fallback, the developer selects a font that is very similar to the original, and it will be shown to the user.
Let's take a look at a selection of the most popular standard fonts HTML.
15 Best Safe Web Fonts
Arial
It is considered standard in most cases. The most common typeface sans serif» or sans-serif fonts ( which do not have serifs at the tips of the letters). It is often used in Windows to replace other characters.
Helvetica
Helvetica is a lifesaver for designers. This standard web font almost always works at least as a safety net for other fonts).
Times New Roman
Serves the same role for serif fonts as Arial does for sans-serif ones. It is one of the most popular Windows devices. This is an updated version of the old Times font.
Times
css standard font The Times is familiar to most. To many, he was remembered by small letters in the narrow columns of old newspapers. The most common type of printing that has become a tradition.
Courier New
Similar to Times New Roman and used as a variation of the old classic. It is also considered a monospace font. Unlike serif and sans-serif fonts, all its characters have the same width.
Courier
An old fixed-width font that is used as a fallback on almost all devices and operating systems.
Verdana
Verdana can rightfully be considered a true web font ( true web font) thanks to simple lines that act as serifs, as well as a large size. Its letters are slightly elongated, so they are easy to read on the screen.
Georgia
The standard web font Georgia is similar in shape and size to the Verdana font. Its characters are larger than other fonts of the same size. But it is better not to use it in tandem with others. The same Times New Roman, compared to it looks like a dwarf.
Palatino
Palatino belongs to the Renaissance. No jokes. This is another large font that is perfect for the web. It is commonly used in headlines and advertisements.
Garamond
Another old typeface that appeared back in the 16th century in Paris. Its new and improved version is standard on most Windows devices. Later, this font was adopted by other operating systems.
Bookman
Bookman ( or Bookman Old Style) - one of best standard fonts for headers. Its characteristic feature is legibility even when using a small size.
Comic Sans MS
Comic Sans MS is a fun alternative for serif fonts.
Trebuchet MS
This is a medieval themed font originally developed by Microsoft Corporation in the mid-nineties. It was used in Windows XP. Today, with its help, they make up the main text.
Standard site fonts are those fonts that are installed by default on the computer of the user browsing the site.Any browser by default does not download or install fonts from third-party resources. That is why the problem of "non-standard" fonts often arises. Let's say the webmaster decided to make some beautiful font on the site, indicated it in the code, and most site users do not have this font installed in the operating system.
The browser, of course, will try to replace this font with one of those that are installed, but the site will not be displayed at all as it was originally intended. Of course, there are technologies that allow you to get around this limitation, but it is better to do this in extreme cases, when it is simply impossible to do without third-party fonts.
So, what is this “standard set” of fonts. Below is a list of pre-installed fonts for operating systems (fonts recommended for use on websites are highlighted):
| Font name | Windows 2000 | Windows XP | Vista | Windows 7 | Windows 8 |
| Arial | + | + | + | + | + |
| Arial Black | + | + | + | + | + |
| Book Antiqua | + | ||||
| Calibri | + | + | + | ||
| Cambria | + | + | + | ||
| Candara | + | + | + | ||
| Comic Sans MS | + | + | + | + | + |
| Consolas | + | + | + | ||
| Constantia | + | + | + | ||
| Corbel | + | + | + | ||
| Courier | + | + | + | + | + |
| Courier New | + | + | + | + | + |
| Estrangelo Edessa | + | + | + | + | |
| Franklin Gothic Medium | + | + | + | + | |
| Gautami | + | + | + | + | |
| Gabriola | + | + | |||
| Georgia | + | + | + | + | + |
| Georgia Italic Impact | + | ||||
| Impact | + | + | + | + | + |
| Latha | + | + | + | + | |
| Lucida Console | + | + | + | + | + |
| Lucida Sans Console | + | + | + | + | |
| Lucida Sans Unicode | + | + | + | + | + |
| Marlett | + | + | + | + | + |
| Modern | + | + | |||
| Modern MS Sans Serif | + | ||||
| MS Sans Serif | + | + | + | + | + |
| MS Serif | + | + | + | + | + |
| M. V. Boli | + | + | + | + | |
| Nyala | + | + | + | ||
| Palatino Linotype | + | + | + | + | + |
| Roman | + | + | + | + | + |
| Script | + | + | + | + | + |
| Segoe Print | + | + | + | ||
| Segoe Script | + | + | + | ||
| Segoe UI | + | + | + | ||
| Small Fonts | + | + | |||
| symbol | + | + | + | + | + |
| Tahoma | + | + | + | + | + |
| Tempus Sans ITC | + | ||||
| Times New Roman | + | + | + | + | + |
| Trebuchet MS | + | + | + | + | + |
| Tunga | + | + | + | + | |
| Verdana | + | + | + | + | + |
| webdings | + | + | + | + | + |
| Westminster | + | ||||
| Wingdings | + | + | + | + | + |
What do standard fonts look like?
Windows Vista, Internet Explorer 7, ClearType enabled (click image for full size view)Windows Vista, Firefox 2.0, ClearType enabled (click image for full size view)
Mac OS X 10.4.8, Firefox 2.0, ClearType enabled (click image for full size view)
Windows 2000, IE 6.0 (click image for full size view)
In this article I will share my solution to the problem with incorrect display of fonts in Windows 7, requiring restore all standard fonts inWindows 7. The background of the question is as follows: recently I was looking for new original fonts for use in a graphic editor, I downloaded a whole mountain of them, but then I noticed that when a new font is added to the system, if there is a match, then the original font is replaced with a new one (instructions on how to install fonts in windows 7). As a result of such activity, it became impossible to work in half of the system panels and applications due to the fact that they spoke in languages \u200b\u200bunfamiliar to me :).
Quick google for queries " restore system fonts toWindows 7" And " standard fonts forWindows 7”, did not give a special result, the proposed solutions did not help fkb (naturally, reinstalling the system did not suit me). Therefore, I decided to go my own way and, for starters, simply copied the original fonts from a known normal system (recall that fonts are stored in the directory %windir%\fonts) and replaced the fonts on my system with them. The solution helped only partly, it became possible to work in the system, Cyrillic characters native to me appeared, but the font settings left much to be desired. Firstly, the size of some fonts has changed, or their spelling has ceased to match the original, or the font has become bold for some reason.
However, I managed to figure out how to defeat this problem as well. To do this, you need to reset the font settings in the registry, for which download the file attached below, which allows you to restore associations for standard fonts in Windows 7. You can download it:
This file is the exported contents of the registry branch HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts in Win 7. After applying this .reg file, the system needs to be rebooted, lo and behold! the problem with fonts should be gone!
Those. The sequence that helped me restore the default system fonts in Windows 7 is this:
- replacing fonts in the %windir%\fonts directory with fonts from a "clean" system
- export registry branch HLM\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts
I hope if your fonts have also fallen off, then this solution will help you too. In any case, if you find an alternative technique that helped in your particular situation, feel free to share it in the comments. In theory, the instruction is also suitable in cases where the desired font was accidentally deleted, and after it was found and copied back, the glitches do not disappear.
PS. If you don’t have clean Windows 7 at hand, you can download the archive with standard fonts here: http://narod.ru/disk/52061075001.99f42303cf1a0ac70dc978dd20406657/original_fonts.zip.html, the size of the archive is about 350 MB.
