Error in CSS - Font Shorthand Property Order

Hello everyone! 👋🏻

I've noticed a font display issue in the project files for this course. It appears that there's a CSS error stopping the font from being displayed correctly. To address this, let's examine the 'headers.html' file in the course materials.

 body {
            background: #ECEEEF;
            text-align: center;
            margin: 100px auto;
            max-width: 462px;
            padding: 0 40px;
            font: 18px normal 'Varela Round', Helvetica, serif;
            color: #777B7E;
        }

Upon closer inspection, it appears that the problem lies in the shorthand font declaration. The font weight normal should come before the font size 18px.

The corrected declaration should be:

font: normal 18px 'Varela Round', Helvetica, serif;

For a visual reference that explains the order in which the font shorthand properties should be applied, please refer to this flow chart: (Image source: CSS Font Shorthand Cheat Sheet)

Kind regards,

Berian