Font family issue in Layer List Widget and jimu.css

[AnninaHirschi_Wyss1]

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

[BarnabyRockwell]

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.

[RobertScheitlin__GISP]

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

[BarnabyRockwell]

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

Many thanks,

Barnaby

[RobertScheitlin__GISP]

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

[BarnabyRockwell]

Thanks, Robert!!!!

I was also looking at this:

Setting Mime Type for WOFF Files on Windows Servers 

Adding .woff mime fixed the problem!

[BarnabyRockwell]

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

[AnninaHirschi_Wyss1]

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

[JamesCrandall]

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

[JamesCrandall]

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