While the fonts look correct for me in Safari on my iPad, they did not look correct on Edge. Using Edge on my PC right now, VisBug is reporting that the fonts are what they should be, yet the serif text clearly looks like Georgia instead of Literata. The other two look correct on my PC, though on my iPad, only Noto Sans appears to be showing correctly, though maybe it is just using another font with bars on the I. So I'll do a more complete test for Noto Sans.
While the fonts look correct for me in Safari on my iPad, they did not look correct on Edge. Using Edge on my PC right now, VisBug is reporting that the fonts are what they should be, yet the serif text clearly looks like Georgia instead of Literata. The other two look correct on my PC, though on my iPad, only Noto Sans appears to be showing correctly, though maybe it is just using another font with bars on the I. So I'll do a more complete test for Noto Sans.
abcdesfgijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890 !@#$%^&*()_+
Here is the same text with the class set to sans:
And here it is with font-family set to var(--sans-serif):
And here it is with it set directly to Noto Sans