<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <style>
        h2 {
            font: -apple-system-headline;
        }
        p {
            font-family: system-ui;
        }
        </style>
    </head>
<body>
    <h2>Normal Weight</h2>
    <p>Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi</p>

    <h2>100 Weight</h2>
    <p style="font-weight: 100;">Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi</p>

    <h2>200 Weight</h2>
    <p style="font-weight: 200;">Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi</p>

    <h2>300 Weight</h2>
    <p style="font-weight: 300;">Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi</p>

    <h2>400 Weight</h2>
    <p style="font-weight: 400;">Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi</p>

    <h2>500 Weight</h2>
    <p style="font-weight: 500;">Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi</p>

    <h2>Bold Weight</h2>
    <p style="font-weight: bold;">Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi</p>

    <h2>600 Weight</h2>
    <p style="font-weight: 600;">Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi</p>

    <h2>700 Weight</h2>
    <p style="font-weight: 700;">Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi</p>

    <h2>800 Weight</h2>
    <p style="font-weight: 800;">Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi</p>

    <h2>900 Weight</h2>
    <p style="font-weight: 900;">Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi</p>
</body>
</html>
