topic Re: Font family issue in Layer List Widget and jimu.css in ArcGIS Web AppBuilder Questions

Font family issue in Layer List Widget and jimu.css

AnninaHirschi_Wyss1 — Thu, 28 Jul 2016 06:14:18 GMT

Dear all,

I don't know if that is already a known issue, but I personally don't like the font-family used in the LayerList widget, after the update of WAB 2.1 (online and dev).

So (for dev version only) I searched a bit in the CSS's and found some font-family definitions like Avenir-Medium, instead of Avenir Medium.

Basically I replaced all the appearances of that "-" in the following files, which fixes it.

- \LayerList\css\style.css (Lines 4, 30, 459, 493)

- \jimu.js\css\jimu.css (Lines 3597, 3746, 3776) (affects other widgets, e.g. “Robert’s eSearch Widget”)

I also informed the Esri Support Team about it.

Regards,

Annina

PS: Just got a note from support that they already logged a bug: BUG-000097347: The font used for items in the Layer List widget doe..

Re: Font family issue in Layer List Widget and jimu.css

RobertScheitlin__GISP — Thu, 28 Jul 2016 12:55:58 GMT

Annina,

Thanks for sharing this info.

Re: Font family issue in Layer List Widget and jimu.css

AnninaHirschi_Wyss1 — Fri, 29 Jul 2016 08:34:00 GMT

You're welcome!

BTW the Select Widget is also concerned

\widgets\Select\css\style.css:

Lines 19, 37, 40, 182

Re: Font family issue in Layer List Widget and jimu.css

TrentReeder — Thu, 04 Aug 2016 17:07:59 GMT

In the jimu-theme.css file, change these two lines and most of the font reverts back to the previous WAB release. At least that is what I have found so far...

Line 13 (.jimu-main-font), uncomment
Line 65 (.jimu-widget), change color to #838383

Re: Font family issue in Layer List Widget and jimu.css

AnninaHirschi_Wyss1 — Mon, 08 Aug 2016 07:11:54 GMT

Hi Trent,

I tried your solution, but this doesn't work for me... It modifies only the title fonts of the widget, but not the layer list itself.

For the select widget there is another one to fix it on the config window:

Select\setting\css\style.css on lines 9 & 28

Re: Font family issue in Layer List Widget and jimu.css

TrentReeder — Mon, 08 Aug 2016 13:56:28 GMT

Yeah, shortly after posting I noticed that my "simple" fix didn't catch all the widget fonts.

Thanks for the tip for the select widget!

Re: Font family issue in Layer List Widget and jimu.css

BarnabyRockwell — Wed, 12 Oct 2016 22:01:57 GMT

This is great! Thank you, Annina!

Re: Font family issue in Layer List Widget and jimu.css

AnninaHirschi_Wyss1 — Thu, 13 Oct 2016 06:38:14 GMT

You're welcome, Barnaby.

It looks like that in the meantime the online Version of WAB is fixed.

Re: Font family issue in Layer List Widget and jimu.css

BarnabyRockwell — Thu, 13 Oct 2016 16:36:30 GMT

Annina,

I am having a very strange issue with the font fix. The issue doesn't involve your fix, but.....

1) The fix works perfectly using IE11, Firefox, and Chrome when the fixed app is hosted on an internal server (Win Server 2012). The fix also works fine when an app with it is viewed from within WAB Dev using IE11.

2) When an app with the fix is hosted on a public server (Win Server 2008), the fix works in Edge, Firefox, and Chrome, but NOT in IE11. You can see for yourself with this app:

ArcGIS Web Application

This is very odd, and I am stumped. I cleared my IE11 cache many times, and still the fonts are bad after the app is reloaded.

Cheers,

Barnaby

Re: Font family issue in Layer List Widget and jimu.css

RobertScheitlin__GISP — Thu, 13 Oct 2016 16:39:50 GMT

Barnaby,

Does your browsers network traffic say anything about missing font or .wof files?

Re: Font family issue in Layer List Widget and jimu.css

BarnabyRockwell — Thu, 13 Oct 2016 16:45:37 GMT

Hi Robert!

I'm checking now in IE11 console......

Thanks,

Barnaby

Edit:

@font-face failed OpenType embedding permission check. Permission must be Installable.

jimu.js init...

What the..... ??????????????????

Edit2:

From jimu.js:

@font-face {
font-family: "Avenir Light";/*LT W01 35*/
src: url("./fonts/3511a780-31ca-4ee1-9083-89b1b7185748.eot?#iefix");
src: url("./fonts/3511a780-31ca-4ee1-9083-89b1b7185748.eot?#iefix") format("eot"), url("./fonts/c4352a95-7a41-48c1-83ce-d8ffd2a3b118.woff") format("woff"), url("./fonts/3e419b5b-c789-488d-84cf-a64009cc308e.ttf") format("truetype"), url("./fonts/ca038835-1be3-4dc5-ba25-be1df6121499.svg#ca038835-1be3-4dc5-ba25-be1df6121499") format("svg");

Offending file in bold.

Re: Font family issue in Layer List Widget and jimu.css

RobertScheitlin__GISP — Thu, 13 Oct 2016 17:08:49 GMT

Make sure your web server has the .wof mime type set.

Re: Font family issue in Layer List Widget and jimu.css

BarnabyRockwell — Thu, 13 Oct 2016 17:13:10 GMT

Ok, Robert. I am out of my depth here, but I will look into it.

Many thanks,

Barnaby

Re: Font family issue in Layer List Widget and jimu.css

RobertScheitlin__GISP — Thu, 13 Oct 2016 17:24:18 GMT

http://eli.eliandlyndi.com/2010/11/29/enable-iis-to-serve-woff-and-svg-files/

Re: Font family issue in Layer List Widget and jimu.css

BarnabyRockwell — Thu, 13 Oct 2016 17:29:38 GMT

Thanks, Robert!!!!

I was also looking at this:

Setting Mime Type for WOFF Files on Windows Servers

Adding .woff mime fixed the problem!

Re: Font family issue in Layer List Widget and jimu.css

BarnabyRockwell — Thu, 13 Oct 2016 21:57:52 GMT

Note that WAB Dev 2.2 was just released. I hope the font fix is in it, also.

Re: Font family issue in Layer List Widget and jimu.css

AnninaHirschi_Wyss1 — Fri, 14 Oct 2016 06:35:18 GMT

Yes! It's fixed also in Dev , BUT: They missed a few:

\jimu.js\css\jimu.css

- line 3829 (appstate-popup) (not so very important)

- line 3978 (.popup-menu .menu-title .label) > visible in the select widget, and here Avenir-Roman is used, that is not even defined, as it seems. Replace by Avenir Medium or so

\widgets\Select\setting\css\style.css (Widget config page)

- line 9

- line 28

Re: Font family issue in Layer List Widget and jimu.css

JamesCrandall — Mon, 17 Jul 2017 17:53:17 GMT

Is there a comprehensive list of things to do in order to fix this issue?

I'm not sure if I've captured everything suggested in this thread because I think I've implemented the suggestions but I'm still seeing an issue with the Layers List widget.

This is also happening in WAB Developer 2.4

Re: Font family issue in Layer List Widget and jimu.css

JamesCrandall — Mon, 17 Jul 2017 17:56:18 GMT

What exactly is the suggestion here? I can locate these references but I'm not understanding what I'm supposed to do.