What are the standard fonts? Fonts common to all (current) versions of Windows and their Mac equivalents
If you are new to web design, you may be thinking something like: “Why should I be limited to such a small set of fonts? I have a huge collection of beautiful fonts!” The fact is that the visitor's browser can only display those fonts that are installed in his operating system ( approx. translator: Currently, it is already possible to use virtually any fonts when designing pages and its new property @font-face; however, not all browsers yet support this function), 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
| @font-family meaning | 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 come with many Microsoft applications), so they are installed on many Windows 98 computers.
2 Character fonts are only displayed 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 The Book Antiqua font 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 Safari in standard style, but do not 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 installed on Mac only with Classic installation
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 choosing the right standard fonts. Font embedding services such as Google Web Fonts, or Typekit, were created as an alternative with the goal of providing something new.
They are very easy to use. Let's take as an example Google service Web Fonts.
Choose the font Open Sans, Droid Serif or Lato. Write the code and paste it into the element HTML document. You're ready to reference it in CSS! The entire 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 this means that there may be problems. Are you happy with what you chose? beautiful font for the site, and the visitor to the web page sees ugly writing instead.
This will not happen if you implement a backup option.
How important is it to use safe web fonts?
Each device has its own set of pre-installed fonts. Which one depends on the operating system. The trouble is that there are slight differences between them.
What about websites? Like this one? The font you see may not be the one that was originally specified 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 you see is one of the standard options. For example, Times New Roman.
Therefore, the text on your screen may look simply terrible.
And here standard fonts for site available on all operating systems. This is a small collection available on Windows, Mac, Google, as well as Unix and Linux.
With the help of this selection, designers, as well as website owners, can specify which font should be used as a backup font. This gives you the ability to control how the page will look on different devices.
As a fallback option, the developer selects a font that is very similar to the original one, and it is this one that will be shown to the user.
Let's take a look at a selection of the most popular standard fonts HTML.
15 Best Web Safe Fonts
Arial
Considered standard in most cases. The most common font " sans serif"or sans serif fonts ( which do not have serifs at the ends of the letters). It is often used in Windows to replace other characters.
Helvetica
Helvetica is a lifesaver for designers. This standard web font works almost always ( By 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 on Windows devices. This updated version old Times font.
Times
CSS standard font The Times is familiar to most. Many people remember him in small letters in 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 classics. It is also considered a monospaced font. Unlike serif and sans serif fonts, all its characters have the same width.
Courier
Old font fixed width, which is used as a backup on almost all devices and operating systems.
Verdana
Verdana can rightfully be considered a true web font ( true web font) thanks to simple lines acting as serifs, as well as 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 combination with others. The same Times New Roman looks like a dwarf in comparison.
Palatino
Palatino dates back to the Renaissance era. No jokes. This is another one large font, which is ideal for the Internet. It is commonly used in headlines and advertisements.
Garamond
Another ancient font that appeared in the 16th century in Paris. Its new and improved version comes 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 headings. His characteristic- readability 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 in the mid-nineties. It was used in Windows XP. Today, it is used to compose the main text.
Arial Black
Analogue standard font for the site Arial. True, it is larger, thicker and tougher. Its proportions are similar to the Helvetica font. And is it important. They can successfully replace Helvetica without having to buy a license.
Impact
Another great font for highlighting headings. It works well in a short phrase consisting of several words, as well as in long sentences.
This list contains fonts common to all current Windows operating systems (in fact, since Windows 98), and their equivalents in Mac OS. Such fonts are sometimes called "browser safe fonts" ( browser safe fonts). This is a small reference book that I use when I make Web pages and I think it will be useful to you too.If you are new to web design, you may be thinking something like: “Why should I be limited to such a small set of fonts? I have a huge collection of beautiful fonts!” The fact is that the visitor's browser can only display those fonts that are installed in his operating system ( approx. translator: Currently, it is already possible to use virtually any fonts when designing pages using CSS 3 and its new property @font-face; however, not all browsers yet support this function), 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
| @font-family meaning | 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 come 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 by a standard font (although, for example, the Symbol font is displayed in Opera, and Webdings in Safari).
3 The Book Antiqua font 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 Safari in standard style, but do not 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 installed on Mac only with Classic installation
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)
When starting to create a layout, you need to specifically specify in the CSS the fonts used on the page. Often, in different fonts, the designer types not only the main text of the page, but also various headings, logos, and monograms.
A good designer, like a good layout designer, knows that the browser can only use those fonts that are installed on the user’s computer to display a page. That is, fonts can be divided into two categories:
- Fonts that will be displayed without problems by the vast majority of users.
- Fonts that you have enough large group there are no users.
If the designer used fonts of the second category to create, for example, a logo or large static headings, you can not hesitate to use the technique of replacing text with an image. The disadvantage of using this technique is inflexibility. In case of changes in the text, you will have to redo the image and change the CSS (for example, if the dimensions new picture will not match the old one).
We can say that the danger of using a technique directly depends on the likelihood of changing the text. Therefore, for example, the general text of a page cannot be written in non-standard fonts! A competent designer would never do this. And if the designer comes across a green one, a good layout designer is simply obliged to correct his mistake - in the layout, replace this font with the most similar standard one.
But how can one distinguish the fonts of the first group from the second? It is clear that you cannot rely on a set of fonts installed directly on your computer! Let's figure it out.
Standard fonts
Standard fonts are a set of fonts that are installed with the operating system. Since operating systems are different, their set of fonts is different. List of standard fonts different versions Windows can be found, for example, in the article Standard Windows fonts, and a list of standard Mac OS fonts can be found on the page Fonts included with Mac OS. As for Unix/Linux operating systems, they do not have a single set of fonts. Many Linux users use the DejaVu font set, in particular on Ubuntu they are installed by default. According to statistics from http://www.codestyle.org, many Unix/Linux users also have URW, Free and other font sets installed. According to the same statistics, more than 60% of Unix/Linux users have fonts on their computer Core set fonts for the Web, which until 2002 was officially available for free download on the Microsoft website.
In order for the page to be displayed as the designer intended on any operating system, it is possible to CSS property font-family specifies multiple fonts, separated by commas.
This property specifies a prioritized list of font family names and/or generic family names. According to the CSS2 specification, there are two types of font family names:
- The font family name of your choice. For example, “Times new Roman”, “Arial” and others. Font family names containing spaces must be enclosed in quotation marks. If quotes are missing, any space characters before and after the font name are ignored, and any sequence of spaces within the font name is converted to a single space.
- Generic (common) family. The specification defines the following 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).
The names of the ancestral families are keywords and does not have to be in quotation marks.
Thus, for the design, a standard font from OS Windows is taken, a similar one for Mac OS and Unix/Linux is selected, a common font family is specified, and you’re done.
But it's not that simple. Let's dig in more detail.
Finding Web Safe Fonts
On the Internet, the concept of “safe” Web fonts has historically developed. A safe font is a font that is standard for all operating systems. Since we can only dream of such a state of affairs, there are no absolutely safe fonts!
Some fonts can be called safe with some reservations.
The basis for determining “safe” fonts were the fonts of the most common operating system. Windows systems, which are also used in other operating systems. An example of such use is the already mentioned Core fonts for the Web font package, which, according to statistics, has been downloaded by many Unix/Linux users.
This package includes the following fonts: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. All of them support the Cyrillic alphabet, which is important for Runet.
The set of fonts that come standard with Mac OS X (this OS is the most widely used among Mac OS users) includes all the fonts from the Core fonts for the Web set.
Thus, based on Windows fonts used in other operating systems, the following list of so-called “safe” Web fonts was formed:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
The Webdings font contains icons and cannot be used for content. Andale Mono is not widely used because it is not suitable for everyday reading of text from the screen and not everyone has it Windows users.
Every Windows, Mac OS X user, and the vast majority of Unix/Linux users (i.e., those who have installed the Core fonts for the Web package) have all these fonts.
But what about the rest? After all, you want the designer’s plan to be seen by as many users as possible!
Fonts supporting Cyrillic
A specific feature of the RuNet is the problem with page encodings and support for Cyrillic in fonts. To avoid problems with various character encodings, smart people came up with Unicode, which allows you to combine characters from several languages in one font. Thus, for Russian-language pages you need to use only Unicode fonts that support Cyrillic.
Below is a table of font correspondences.
| Windows | Mac OS | Unix/Linux | ancestral family |
|---|---|---|---|
| Arial Black | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
| Arial | Helvetica C.Y. | 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 C.Y. | * (see below) | Sans-serif |
| Times New Roman | Times C.Y. | Nimbus Roman No9 L | Serif |
| Trebuchet MS | Helvetica C.Y. | * (see below) | Sans-serif |
| Verdana | Geneva C.Y. | DejaVu Sans | Sans-serif |
* in the column opposite the font means that native Cyrillic Windows equivalents The operating system does not have a font. But at the same time, there is a high probability that this font itself is installed directly in the operating system.
For example, if the main text of the layout is Arial, we find this font in the table and write the corresponding line in CSS:
body ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )
body ( font - family: Arial, "Helvetica CY", "Nimbus Sans L", sans - serif; |
This entry means that if the user has the Arial font (and all Windows users and all Mac users OS X), then the page will be displayed in this font. If the user does not have this font, then the page of a Russian-speaking Mac OS 9 user will be accurately displayed in the standard system font Helvetica CY, and for a Unix/Linux user it will be displayed in the Nimbus Sans L font, which is installed on 90% of Unix/Linux users. If the Unix/Linux user is in the 10% that does not have this font, then the page will be displayed in the serif font that is set by default for viewing Web pages.
In addition to the fact that the table takes into account Unix/Linux fonts, there is also some strange CY icon after the usual Helvetica. Let's figure out what it is!
Before the release of Mac OS X, this line had the following meaning: for Windows users, we display the page in Arial, for Mac OS 9 users, in the standard Helvetica font, and for the rest, we see the page in the system sans-serif font, which is configured by default in the browser. But again, an important nuance! U standard Mac OS 9 Helvetica font no Cyrillic! For the Russian-language page, this meant the following: for Windows users we display the Arial page, for Mac OS 9 users - in the standard Helvetica font, which displays unreadable information, and the rest see the page with the system sans-serif font configured by default in the browser.
To correctly display this set for Mac OS 9 users, instead of non-Cyrillized Helvetica, it makes sense to specify the same standard Mac OS 9 font Helvetica CY, containing Cyrillic.
The reading of rulers has changed since the release of Mac OS X. There is now one common standard font specified for Windows/Mac OS X. And if we want Mac OS 9 users to be able to see the designer’s intention, we need to include a font containing Cyrillic in the font line.
So while there are no safe fonts, there are safe families of fonts. They are also called font CSS stacks. In addition to standard Windows/Mac OS X fonts, these lines can also include equivalent fonts from standard set Mac OS 9 (which does not contain "safe" fonts by default) and common Unix/Linux fonts.
Any layout designer sooner or later encounters a moment when a designer uses a font in a layout that is not included in the list of “safe” fonts; But this is not yet a reason to sound the alarm! For example, designers very often use the Tahoma font on layouts, which is not included in this list. A properly constructed line of fonts opens up the possibility of using not only Tahoma, but also other fonts. An increasing number of designers are taking advantage of this opportunity, and a competent layout designer should know about this.
Below is an additional table of fonts that are not included in the list of “safe” fonts, but can be used in layouts.
| Windows | Mac OS | ancestral family |
|---|---|---|
| Lucida Console | Monaco | Monospace |
| Lucida Sans Unicode | Lucida Grande | Sans-serif |
| Tahoma | Geneva C.Y. | Sans-serif |
What if there is no Cyrillic alphabet?
For English-language texts, the above tables have a slightly different appearance.
| Windows | Mac OS | Unix/Linux | ancestral family |
|---|---|---|---|
| Arial Black | Gadget | Nimbus Sans L | Sans-serif |
| Arial | Helvetica | Nimbus Sans L | Sans-serif |
| Comic Sans MS | Monaco | TSCu_Comic | cursive |
| Courier New | Courier | Nimbus Mono L | Monospace |
| Georgia | * (see below) | Century Schoolbook L | Serif |
| Impact | Charcoal | Rekha | Sans-serif |
| Times New Roman | Times | Nimbus Roman No9 L | Serif |
| Trebuchet MS | Helvetica | Garuda | Sans-serif |
| Verdana | Geneva | DejaVu Sans | Sans-serif |
For Arial, Courier New and Times New Roman fonts, when creating rulers, it is better to specify the Unix/Linux font first, and then the Mac OS font. This is due to some crookedness of the Linux X11 core fonts set.
Fonts that are not included in the "safe" list, but can be used in layouts, are better defined by CSS font stacks based on this table.
| Windows | Mac OS | Unix/Linux | ancestral family |
|---|---|---|---|
| Lucida Console | Monaco | - | Monospace |
| Lucida Sans Unicode | Lucida Grande | Garuda | Sans-serif |
| Palatino Linotype | Palatino | Garuda** | Sans-serif |
| Tahoma | Geneva | Kalimati | Sans-serif |
A dash in the Unix/Linux column indicates that users of these operating systems will most likely see the default font on the page.
** In this line, it makes sense to place the Garuda font before Palatino (see explanation above).
Conclusions:
- There are no absolutely safe fonts. The following fonts can be considered conditionally safe:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
- Safe CSS stacks that take into account support for the Cyrillic alphabet in fonts can be found in the article.
- If support for the Cyrillic alphabet is not important on the page, we use the CSS stacks from the article.
Fonts are an integral and very an important part website design, emphasizing its individuality. The article will talk about connecting standard fonts to a web page, they are also called system fonts, and in the next article we will look in detail at choosing and connecting fonts from Google Fonts to a WordPress site.
System, standard, safe fonts
Any browser displays only those fonts that are present in the computer's operating system. That's why they are called system ones and are installed by default along with the operating system.
And they are called safe fonts because they are likely to be displayed in the browser of the majority of site visitors.
But the problem is that different operating systems have different sets of fonts installed. You can view the sets of supplied fonts along with the operating system on the official Windows pages,Mac OS. And in Unix/Linux there is no standard set at all.
In order for the Internet page to be displayed in accordance with the designer’s idea, a font property called font-family was installed in CSS
font-family property
The font-family property is font families grouped by certain characteristics.
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).
This way, similar fonts from different operating systems are simply selected and connected to the Internet page separated by commas.
Here's an example, just for visual perception. We will return to this example later when we consider directly connecting fonts.
Just follow the logic and everything will become crystal clear.
Body (font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )
Let's look at what was written:
- OS Windows - Arial;
- OC Mac OS - Helvetica CY;
- OC Unix/Linux - Nimbus Sans L;
- Generic family - sans-serif.
So-called safe fonts
Based on OS Windows, a list of several safe fonts has been 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 contains similar fonts belonging to a specific family.
Table of correspondence and belonging of fonts to a specific family:
| Windows | Mac OS | Unix/Linux | ancestral family |
|---|---|---|---|
| Arial Black | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
| Arial | Helvetica C.Y. | 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 C.Y. | * (see below) | Sans-serif |
| Times New Roman | Times C.Y. | Nimbus Roman No9 L | Serif |
| Trebuchet MS | Helvetica C.Y. | * (see below) | Sans-serif |
| Verdana | Geneva C.Y. | DejaVu Sans | Sans-serif |
* When connecting fonts, you can safely rely on it. Table supports Cyrillic characters, Russian alphabet.
I took the table itself in this article.
Connecting system fonts to the site
To plug system fonts There are several ways to access the site. In addition, you can connect different fonts to different paragraphs. Apply different fonts to individual words and phrases. I will now try to consider all this.
So, let's do everything in order.
Connecting fonts in a CSS file
If you need to connect main font for the entire document, you just need to add the following code to the style sheet:
Body ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* connect the font to the entire document */ font-size: 16px; /* additionally set the font size */ font-weight: 400; /* set the font weight, or instead of 400, set the value to normal */ )
Assigning a font for headings H1, H2, H3, H4, H5, H6, (here it’s the same, we just set the bold value to highlight the headings):
H1,h2,h3,h4,h5,h6( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* connect the font to the headings */ font-weight: 600; /* set font weight, or instead of 600, set the value to bold */ )
We assign a font only to paragraphs:
P( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* connect the font to paragraphs, can be applied to li lists, div blocks, form and other elements */ font-weight: normal; /* set the font weight, or instead of 600, set the value to bold */ font-size: 16px; /* additionally set the font size for paragraphs */ )
To assign a font only to a specific paragraph, or block, you must first assign a class to this block in the HTML document
Here's a paragraph with a custom font
And in CSS table write the following code:
Font( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* we connect the font to certain paragraphs, can be applied to individual li lists, div blocks, forms and other elements */ font- weight: normal; /* set the font weight, or instead of 600, set the value to bold */ font-size: 16px; /* additionally set the font size for paragraphs */ )
Now, for each tag - html element with the class.font (call it whatever you like), the font will be assigned an Arial font, with normal (400), weight and size 16 pixels.
Similarly, you can assign different fonts to li lists, tables, entire div blocks, individual words, or phrases.
Connecting fonts in an HTML document
Fonts are included directly into an HTML document in the same way as a CSS file, the only difference is in the syntax. You can include fonts in the document header - between tags
(similar to a CSS file), or inline - assigning properties directly to html tags.Including fonts in the header, between tags
. To do this in html document add this code:
I won't repeat myself here. Everything is similar to the connection in the CSS file.
Connecting fonts inline, directly to the site elements. Let me give you a few examples:
Connecting the font to the paragraph
Here is a paragraph with text
We highlight in bold separate word and assign a font separate from the main one
Here is a paragraph with text, and this word, which should be highlighted in bold
Here's the link
Similarly, we assign fonts to any html tag.
But still, it is best and recommended to assign styles to elements via CSS file. Firstly, you need to write styles in CSS only once and then assign only the required class in HTML. Secondly, by writing inline styles, duplicate content is created. These properties and classes seem to be indexed by search engines, and I heard that the W3C wants to abolish inline altogether. Although sometimes it’s easier to write styles this way.
All. Follow the site updates, I’m preparing an article about connecting non-standard and original fonts to the site so that they are displayed correctly in all browsers. I will also introduce you to several good services, where you can select custom fonts.