Select And Compare CSS font Property Values Side By Side Online

Last reviewed/updated: 22 Aug 2023 | Published: 23 Jan 2014 | Status: Active
Web browser support: Internet Explorer 11+, Edge 12+, Firefox 8+, Chrome 30+, Opera 17+

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:

Chrome 115 Standard font

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

1.) font-family:    font-size:    px or pt:    font-weight:    font-style:
2.) font-family:    font-size:    px or pt:    font-weight:    font-style:

2.2. Compare CSS font Property Values Side By Side Online

If the style of the text does not change when a 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