You can't predict which fonts are available on all devices so you make a font-family from a web-safe list of fonts with similar characteristics.
As an example,
body {
font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif; font-size: calc(16px + 1vw); line-height: calc(1.1em + 0.5vw);
}
When 1st font isn't available, the 2nd font is displayed, or the 3rd or 4th, etc... until one matches the device fonts.
As seen in Dreamweaver Live View.
As seen in latest Firefox desktop browser:
Since this is being viewed from the same device, the fonts are identical.
On another device, the fonts may be different.
If you're experiencing other problems, be sure to validate code and fix reported errors.
HTML https://validator.w3.org/
CSS https://jigsaw.w3.org/css-validator/
Hope that helps.
... View more