Fonts Don't Display Correctly

[English100]

Have Adobe changed how fonts are displayed in Design View in build 10155?  Although not all font in my CSS displayed correctly before (mainly Google fonts) the others displayed correctly. Now everything defaults to Times New Roman. They display okay in Live View. It makes it difficult to locate words in headers as I have to keep going back and forth between Design and Live Views.

Thanks

Alan

[WolfShade]

Design View is not a browser and does not really conform to browser standards.  You would be better off testing by using Preview In Browser and select FF or IE (assuming you have them set up.)

If you are having problems with the "drag n drop" feature of Design View, be aware that Design View is not a true WYSIWYG IDE.  You would be better off learning HTML and manually coding your projects, if this is the case.

V/r,

^ _ ^

[Jon Fritz]

How are your fonts attached to your site and where are they located?

Design View has some serious deficiencies when it comes to externally referenced files and it seems to be getting worse over time.

If you recently moved over to CC from one of the old Creative Suite versions, you no longer need to move back and forth between Live and Design if you're working on text. The Live View Editor allows you to make changes by double-clicking the text.

[Nancy OShea]

English100  wrote

Now everything defaults to Times New Roman.

This implies your document contains code errors.  Use the code validation tools below to check your HTML & CSS code.

The W3C Markup Validation Service

The W3C CSS Validation Service

[English100]

Jon Fritz II

My fonts are in my style sheet. I've been using DW ever since the 2017 version. I know Design View is not good at rendering fonts, but up till now the only ones it would render were Google handwriting fonts.

Nancy

These are html files that I have been using for ages and have not edited them recently and it is not all of them. It just started displaying Times New Roman recently and I put it down to the recent download.

I ran one file through CSS Validation and it came back with this (I have no idea what it's telling me).

4		Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.
112		Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.

[WolfShade]

It's telling you that your CSS contains font family names that contain spaces.  Place quotes (") around the family names, and those specific errors will be corrected.

(ie, Times New Roman should be "Times New Roman", Goudy Bookletter 1911 should be "Goudy Bookletter 1911", etc.)

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

V/r,

^ _ ^

[English100]

Wolfshade

As in the following (spaces removed):
Thanks
Alan

.styletvstory {

  font-family: "TimesNewRoman", serif;

  color: #242424;

  font-size: 18px;

  line-height: 15pt;

  font-weight: bold;

}

and

  .styleccursive3 {

  font-family: MrDeHaviland, cursive;

  font-size: 36px;

  color: #983200;

  letter-spacing: 2px;

  text-align: left;

}

[WolfShade]

No.. you keep the spaces (that's the font ID) and surround the name with quotes.

  .styleccursive3 {

  font-family: "Mr DeHaviland", cursive;

  font-size: 36px;

  color: #983200;

  letter-spacing: 2px;

  text-align: left;

}

[English100]

Thanks. I fixed all my fonts in my style sheet but the issue with not rendering them correctly is still there. As I said before the only fonts that didn't render properly in Design view before were three cursive fonts- two of which were Google fonts. This issue has only just raised its head and I have no idea why some of my files render okay and others don't.

Alan

PS I noticed in another thread where the OP found out that he didn't have Doc Type as the first line of code and when he downloaded the new version of DW his fonts didn't render correctly. This is what I have. Is this correct?

Alan

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

[English100]

Okay guys, thanks for your help so far. I ran my document through The WC3 Validator Service

and it came up with these errors that are in the head of the document. I have no idea how to fix the errors as I'm not a code person. I've added the code from the document and would greatly appreciate it if someone could mark up what needs fixing. Still not sure if this will fix the issue I'm having with fonts not displaying correctly in Design view, but Nancy OShea said to start there first.

Thanks

Alan

I copied and pasted the code and error messages here but Adobe won't let post - probably because of the code, so I've uploaded it to a file hosting service since it's the only way to let you have the code.

http://myfile.org/o0n4f4e3b1/Code.txt 

[BenPleysier]

Instead of

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Try the HTML5 declaration

<!DOCTYPE html>

You will now get different errors, but I think most of the current ones will disappear.

Once you have done that, copy and paste here, the code of your document. We can then run it through the validator ourselves.

[English100 · Accepted solution]

The website URL starts with https: so I changed my href to https: and voila, problem fixed. Apparently my HTML file couldn't find my stylesheet. It was as simple as that.

Thanks for help and suggestions.

Alan

[WolfShade]

It didn't even occurr to me that this might be a mixed protocol error.

Yes, if you load your page in https, you have to load everything in https, because if one thing isn't https, then it's considered not fully secure.

One solution (for future reference) is to use the "protocol agnostic" approach to href.  Keep the protocol out (http, https) and begin the URI with just two slashes //.

//www.google.com, for example.

HTH,

^ _ ^

[Nancy OShea]

WolfShade  wrote

One solution (for future reference) is to use the "protocol agnostic" approach to href.  Keep the protocol out (http, https) and begin the URI with just two slashes //.

Protocol agnostic URIs might pose problems for DW.  Test it to see if it effects performance.  If it doesn't  then go ahead and use //  .

[English100]

Thanks for that tip WolfShade. The strange thing is, these files had been like that for long time (with HTTP for my stylesheet) and the fonts displayed just fine. I think the last update of DW somehow caused the issue.

Alan

[WolfShade]

If you're using Design View to check, yes, that's possible.  But then it should have been triggering a warning in most browsers from the beginning.  I know IE will alert the user that the whole page isn't encrypted.  At least it used to.

V/r,

^ _ ^

[Nancy OShea]

Review  CSS font-family property

Example:

p {
    font-family: "Times New Roman", Times, Roman, serif;
}