Issue with Fonts / Misleading Preview

Forum|Forum|1 year ago
May 2, 2024
3 replies
780 views

When html-page uses a font-family tag, the result is different in a web browser from what Dreamweaver shows in preview. Especially, number 0 shows in the browser with diagonal line inside the number. This may be misleading and affect readability. Thanks.

Preview

This topic has been closed for replies.

Correct answer Nancy OShea

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Well that's your problem. Use universal character encoding of UTF-8, not iso-8859-1.

And by the way, your document type is outdated. You should update to HTML5 to support modern devices.

=========
Read chapters & do code exercises
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/

Nancy OShea

Community Expert

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.

Nancy O'Shea— Product User & Community Expert

A

Avatar55977840Author

Inspiring

Thanks for the overview. However, using the Lucida Grande...Verdana font family on the same device, the number 0 had apparently changed to the font with a diagonal line inside the character in Chrome/Mac/Monterey.

B

Ben M

Community Expert

Thanks for the overview. However, using the Lucida Grande...Verdana font family on the same device, the number 0 had apparently changed to the font with a diagonal line inside the character in Chrome/Mac/Monterey.

By @Avatar55977840

The only time I have seen strange font behavior on a Mac prior is when there is a corrupt font on the system. Has this problem only started to occur recently, and if so, can you try disabling some of the newly installed fonts to see if this remedies the issue.