Is there a reason the site itself does not use the rule it says?
The one in article is
-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
The one it actually uses is -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif
It looks like a minor difference, but the former one has segoe ui before helvetica (which is hard-coded as Arial alias on Windows), so it would use segoe ui on Windows; while the latter (currently using) one would show the content as Arial on Windows.