Use same fontFamily but render different font , between headless and not-headless

Question

I use same fontFamily, but it renders different font between headless and not-headless, It's easy to be detected that I'm using headless chrome

This is All my code:

from pyppeteer import launch
import asyncio

async def init_browser():
    browser_args = [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-gpu',
        "--start-maximized",
        "--font-render-hinting=medium",
    ]
    browser = await launch(
        headless=False,
        autoClose=True,
        defaultViewport={'width': 1920, 'height': 1080},
        ignoreDefaultArgs=['--enable-automation', '--disable-extensions'],
        args=browser_args
    )
    page = (await browser.pages())[0]
    res = await page.evaluate("""
        () => {
        var n = document.getElementsByTagName("body")[0];
        var a = document.createElement("span");
        a.innerHTML = "mmmmmmmmlli";
        a.style.fontSize = "192px";
        a.style.fontFamily = "Monospace";
        n.appendChild(a);
        e =  a.offsetWidth + "," + a.offsetHeight;
        return e
    }
        """)

    print(res)
    await asyncio.sleep(3)
    await page.screenshot(path='./test.png')

asyncio.get_event_loop().run_until_complete(init_browser())