API v4.10 adding a local font (ESRI Weather)

[ChadKahler]

Prior to the newest release of the ESRI JavaScript API 4.10, I have been able to include the ESRI Weather font to my page through CSS via the following code:

@font-face {

font-family: "ESRI Weather";

src: url("ESRIWeather.eot");

src: url("ESRIWeather.eot?#iefix") format("embedded-opentype"),

url("ESRIWeather.woff") format("woff"),

url("ESRIWeather.ttf") format("truetype"),

url("ESRIWeather.svg#svgESRIWeather") format("svg");

font-weight: normal;

font-style: normal;

}

That does not appear to work anymore with 4.10 and the documentation is a little confusing about how to add a local font.  Has anyone been able to successfully include a local font with a page that utilizes version 4.10 of the API....or do you know the path of how I could include the ESRI Weather Font from ESRI?

Thanks for any insights that someone may have!

[Noah-Sager]

Archana, we do not have an official solution for this workflow at this time, but it is under consideration. Same for what Chad said about including the Esri Weather font. Will keep this thread updated when we have some news to share.

[andrei_ste]

I am also trying to label a feature layer in my application developed with React and JavaScript SDK for ArcGIS, with a custom font which I have in woff and woff2 format. @Noah-Sager what tool can I use to convert the font from woff or woff2 to the desired pbf format?

[Noah-Sager]

Hi @andrei_ste. As of 4.27, woff2 will work in 3D SceneViews:

https://developers.arcgis.com/javascript/latest/labeling/#fonts

For 2D MapViews, here are the steps that will export fonts to pbf format using ArcGIS Pro:

1) Install the font

2) Author a small map in Pro and use the font for labels

3) Create a VTPK

4) Unzip it and pull the font out

[andrei_ste]

Managed to convert the font but I still can't see any changes in the webmap. I copied all the files from the VPTK in a folder named inter-bold. From the browser developer tools, it seems that the font is fetched correctly but no changes are applied. Do you have any idea why this is happening? The font that I want to apply is Inter which is open source. Thank you for the response!