How to get a popup with an obscure font to display for all?

329
2
Jump to solution
10-14-2020 08:42 AM
ChrisHay
New Contributor II

I have a web map where I would like to include an Indigenous syllabics font in the popup. My current method works fine until you open the map on a device that does not have the font installed.

This is by simply working in the popup under html for the Custom Attribute Display. Here is the bit that tells the font to display in those syllabics:

<font face="SayisiDS">{Syllabic_G}</font>

Where "SayisiDS" is the name of the font installed on my desktop and "Syllabic_G" is the field name for the attribute in the point file. The curly brackets seems to be what tells the code that this is a field name.

I considered uploading an image of each syllabic name and linking to it in each popup, but it is very labour intensive (there are about 100, and ArcGIS Online doesn't seem to have a quick way to upload many files) and besides it would be much more likely I would make a mistake in the process (and not notice).

The answer may be to convert the font to a web font, e.g. at fontsquirrel
https://www.fontsquirrel.com/tools/webfont-generator 

Then host the web font on ArcGIS Online? If those file type(s) are allowed. Otherwise host elsewhere?

Then use css @ font-face to embed the font in a style sheet? I'm not familiar with programming this way, so don't really know how or if this would work here.

https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ 


Got these ideas from a stack overflow answer here, that references my above two links:
javascript - How to embed fonts in HTML? - Stack Overflow

I'm working on trying this out and will update the post for others' future reference... For context I have very little experience in web programming so it's possible my ideas above are fully or partially nonsensical!

If anyone reads this and knows another solution, or has any other comments about this, I would be glad to hear from you!

0 Kudos
1 Solution

Accepted Solutions
ChrisHay
New Contributor II

I was still unable to find an answer for this. I decided to remove the Syllabics and Roman names from the popup, leaving only the English and other notes.
The Syllabics and Roman were already included as labels baked into the basemap tiles. How I managed that would be a whole separate post. But it seems the best for now is to have labels in a custom basemap, not in the popup. An acceptable workaround, I guess.

ChrisHay_0-1605712371711.png

View solution in original post

0 Kudos
2 Replies
ChrisHay
New Contributor II

I asked a friend... they believe the answer is to have this bit of code at the top (see below). These are all example only, of course in my case I swapped out for the url where I hosted the fonts (I tried on a Wix website).

<style> <!--
@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}
--></style>

But the commenting out ("<!--" and "-->") causes the code to disappear (after implement and re-open the configure box). It seems the html box does not support commenting out. Anyway I would think commenting out would render the code useless.

So why not without commenting out?

<style>
@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}
</style>


Then the <style></style> book ends disappear, and we just see the pile of ugly code in the popup.



I'm out of ideas for today. As far as I can tell the only solution remains that the client viewing the map must install the syllabics font.

0 Kudos
ChrisHay
New Contributor II

I was still unable to find an answer for this. I decided to remove the Syllabics and Roman names from the popup, leaving only the English and other notes.
The Syllabics and Roman were already included as labels baked into the basemap tiles. How I managed that would be a whole separate post. But it seems the best for now is to have labels in a custom basemap, not in the popup. An acceptable workaround, I guess.

ChrisHay_0-1605712371711.png

View solution in original post

0 Kudos