Select And Compare CSS font
Property Values Side By Side Online
1. Introduction
The choice of font is an important decision when designing a web page/site. Therefore, it is useful to be able to compare fonts side by side exactly as they would appear online. In this web page, user selected CSS font
property values in Section 2.1 are applied to strings of text in Section 2.2, thereby allowing CSS font
property values to be compared side by side online.
Web browsers do not include fonts. Web browsers use the computer operating system fonts to display text. If an HTML snippet is assigned a CSS style rule that includes the font-family
property and the computer operating system has the corresponding font, the web browser displays the HTML snippet using the computer operating system font as specified by the CSS. If an HTML snippet is assigned a CSS style rule that includes the font-family
property and the computer operating system does not have the corresponding font, the HTML snippet gets font-family
style from the user agent default styles Standard/Default font setting, which for Chrome 115 (see image below), Edge 115, Firefox 116, Opera 101, and Vivaldi 6.1 is set to Times New Roman. For Chrome, click Menu (Customize and control Google Chrome) | Settings | Appearance | Customize fonts:
Therefore, in the form below, when a font-family
property value is selected and the string of text is styled Times New Roman (as shown in the image above), it is because the corresponding font is not installed on the computer operating system.
Windows and macOS share many fonts, but they also have many different fonts. Therefore, it is a good idea to view this web page to test the fonts you want to use on both Windows and macOS.
2. Select And Compare CSS font
Property Values Side By Side Online
2.1. Select CSS font
Property Values
2.2. Compare CSS font
Property Values Side By Side Online
font-family
property value is selected, it is because the corresponding font is not installed on the computer operating system.
1.) The quick brown fox jumps over the lazy dog THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG 1234567890 `~!@#$%^&*-_=+()\/[]{}<>;:'|",.?
2.) The quick brown fox jumps over the lazy dog THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG 1234567890 `~!@#$%^&*-_=+()\/[]{}<>;:'|",.?
3. Resources And Additional Information
- Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification: 15 Fonts (w3.org)
- Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification: 15 Fonts (w3.org)
- CSS Fonts Module Level 3: W3C Recommendation 20 September 2018 (w3.org)
- Microsoft Typography (microsoft.com)
- Windows 7 Font List (learn.microsoft.com)
- Windows 8 Font List (learn.microsoft.com)
- Windows 8.1 Font List (learn.microsoft.com)
- Windows 10 Font List (learn.microsoft.com)
- Windows 11 Font List (learn.microsoft.com)