Highlighted

Fonts Don't Display Correctly

Contributor ,
Apr 13, 2018

Copy link to clipboard

Copied

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

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

Views

1.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Fonts Don't Display Correctly

Contributor ,
Apr 13, 2018

Copy link to clipboard

Copied

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

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

Views

1.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 13, 2018 0
LEGEND ,
Apr 13, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 1
Adobe Community Professional ,
Apr 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 1
Adobe Community Professional ,
Apr 13, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 0
Contributor ,
Apr 13, 2018

Copy link to clipboard

Copied

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).

4Family 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.
112Family 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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 0
LEGEND ,
Apr 13, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 0
Contributor ,
Apr 13, 2018

Copy link to clipboard

Copied

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;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 0
LEGEND ,
Apr 13, 2018

Copy link to clipboard

Copied

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;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 0
Adobe Community Professional ,
Apr 13, 2018

Copy link to clipboard

Copied

Review  CSS font-family property

Example:

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 0
Contributor ,
Apr 14, 2018

Copy link to clipboard

Copied

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">

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2018 0
Contributor ,
Apr 14, 2018

Copy link to clipboard

Copied

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 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2018 0
Adobe Community Professional ,
Apr 14, 2018

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2018 0
Contributor ,
Apr 14, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2018 0
LEGEND ,
Apr 14, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2018 0
Adobe Community Professional ,
Apr 14, 2018

Copy link to clipboard

Copied

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 //  .

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2018 0
Contributor ,
Apr 15, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 15, 2018 0
LEGEND ,
Apr 16, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 0