font-family not working for me in Microsoft Edge

djohnson · Post by **djohnson** » Fri Dec 02, 2016 12:16 am

While this issue has been bothering me for some time (ever since Windows 10 came out!) I haven't had a chance to do any real investigation until recently.

Microsoft Edge has never displayed fonts in my Flare help systems correctly; it seems to always display Times New Roman. I have seen similar behavior on some but by no means all websites. (Dave Lee's Sage help at http://desktophelp.sage.co.uk/sage200/s ... t/Home.htm looks fine, for example.)

My setup: I develop and do Windows previews on a Mac, in a virtual machine running Windows 10. My help is hosted online, and I preview it using a local web server (web servers running on both Mac and Windows, browsers on both platforms as well). My help systems use web fonts, hosted on a company server.

I've noticed this problem from the first release of Windows 10 to today, with Flare 10 through 2016 r2.

I originally chalked it up to either something in the way my company's server was delivering the fonts, or something in Edge, or both. But I had some extra rime today so I created a fresh project using the "Top Navigation Basic2" template. Using just the template content, I still get a bad preview.

Here is the Edge preview:

Edge-preview.png

Here is the same page in IE 11:

IE11-preview.png

The CSS is very simple for this:

Code: Select all

body
{
	color: #404040;
	font-family: Arial, Avenir, Myriad;
	line-height: 1.7em;
}

I've tried different fonts, a single font, font names in single quotes, font names in double quotes, including the generic sans-serif fallback, enabling MOTW, and even changing the font-family definition through the Developer Tools. Nothing worked.

I tried local styles using styled <span>s:

Code: Select all

    <body>
        <h1>Welcome</h1>
        <p>Here is some general <span style="font-family: 'Courier New';">text for a topic</span>. Replace this with <span style="font-family: 'Arial';">your own content</span>.</p>
    </body>

Here is where that got me:

Edge-styled-spans.png

= = = =

I am at my wit's end (not a far stretch, but still...).

Does anyone else see this problem? Has anyone found a solution? And go ahead, if it is simple, tell me anyway; I like simple.

Thanks in advance (I hope!)

Post by **NorthEast** » Fri Dec 02, 2016 1:05 am

djohnson wrote:My setup: I develop and do Windows previews on a Mac, in a virtual machine running Windows 10. My help is hosted online, and I preview it using a local web server (web servers running on both Mac and Windows, browsers on both platforms as well). My help systems use web fonts, hosted on a company server.

By "web fonts", I'm presuming you have a @font-face definition in your CSS for all the font(s) that you want to use?

Then check that this is set up correctly:
- the @font-face CSS has the correct syntax
- the font-family name matches the name set in your @font-face definition
- you've checked with the browser dev tools that the font files are being downloaded from the server

Also, are your web fonts Arial, Avenir, Myriad? Just Arial is usually a local font on PCs.
If you have a local font with the same name as your web font, then you're not easily going to spot if/when it's using the web font.

djohnson · Post by **djohnson** » Fri Dec 02, 2016 1:42 am

Sorry, I wasn't clear. The test project and sample code are right out of the box (a basic template), no @font-face involved.

I did try just Arial in the font stack, with the same results. In the morning I will try just sans-serif and see where that gets me.

Now my thinking is that Edge must need certain fonts called out differently (maybe with the Postscript name); possibly the Win10 Arial is malformed? Or maybe Edge doesn't play well with some OpenType fonts.

Post by **NorthEast** » Fri Dec 02, 2016 2:06 am

djohnson wrote:Sorry, I wasn't clear. The test project and sample code are right out of the box (a basic template), no @font-face involved.

So you're not using web fonts then? (i.e. there's no reference in the CSS to the font files)

In that case, the browser is looking for these fonts to be installed locally in Windows (or whatever OS it's running in), and have those font family names (exactly).

If you want the fonts to work reliably on different machines/operating systems, then use web fonts (defined using @font-face).
That's what I'm using in the help system you linked to.

djohnson · Post by **djohnson** » Fri Dec 02, 2016 9:20 am

RESOLVED!

I figured this must be an issue between Edge and an installed font but I couldn't figure out what or why. When I opened the Fonts control panel, Arial looked just fine, and it previewed fine in other browsers, just not Edge.

Some more Internet sniffing found this article: https://answers.microsoft.com/en-us/win ... 5d8b376a3b

As it turns out, in my case this was a corrupt copy of Arial Narrow, probably installed by Office 2016. When I looked at Arial Narrow in the Fonts control panel, sure enough, nothing displayed: corrupt font!

I deleted the 4 Arial Narrow styles, and now my test project renders fine in Edge.

I still have some issues with@font-face fonts on my hosted help systems, but after looking at some of the CSS (given to me by our webmaster, keeper of the hosted fonts), I'm convinced the problem is there.

Post by **NorthEast** » Mon Dec 05, 2016 12:55 am

That's the problem if your web font has the same name as a locally installed font. If you want to test it properly, define the font family in @font-face as something different; e.g. call it ArialWeb or something.

Then when you use ArialWeb, you know you're seeing the web font and not a locally installed font.

MadCap Software Forums

font-family not working for me in Microsoft Edge

font-family not working for me in Microsoft Edge

Re: font-family not working for me in Microsoft Edge

Re: font-family not working for me in Microsoft Edge

Re: font-family not working for me in Microsoft Edge

Re: font-family not working for me in Microsoft Edge

Re: font-family not working for me in Microsoft Edge