Caveats

Users must have an internet connection since this is a web font.

RawGit has no uptime or support guarantees so this should not be used for mission-critical solutions.

Product Support

In my testing, this works successfully in:

FileMaker Pro on Mac

FileMaker Pro on Windows

FileMaker Go

WebDirect on Mac  (tested on Mac FMServer)

WebDirect on Windows: Chrome only (tested on Mac FMServer)

Custom Web Publishing (as with any web font)

I did not get this to work in WebDirect in Edge or IE on Windows (Mac FMServer) but I didn't try to troubleshoot it. I leave that to you — and please reply below if you find a fix! :-)

The version of FileMaker shouldn't matter, although the OS version might, since web viewers use the browser engine that's native to the OS.

The demo

Download the demo   (no email registration necessary!)

I've put comments in the FileMaker file.  Basically, we need to define the @font-face(s) in the CSS, linking to the hosted version of each font you'll need. In my testing, Mac needs only the .woff version of the font and an abbreviated grammar of the CSS, but Windows needs more.  Instead of trial-and-error-ing until I found the right combination, I just used the full code from the example from the font’s creator.  If your solution is cross-platform, use the full code since it works on both.

Usage

The values in the sparkline need to be whole numbers from 0 to 100 and must be nested between curly braces { } , separated only by commas. Lucky for us, FileMaker gives us plenty of ways to compile our data into this structure.  

The values then need to be placed inside an HTML element that has the appropriate CSS class attached. Inside that element you can also place the first and last values—on either side of the curly braces—which will be output in the sparkline font (instead of any other font you might be using in that web viewer).

<span class='sparks-dotline-thin'>{10,20,45,70,90}</span>

<span class='sparks-bar-medium'>10{10,20,45,70,90}90</span>

About sparklines

*Sparklines were developed by Edward Tufte (yay!), who described them thusly:

A sparkline is a small intense, simple, word-sized graphic with typographic resolution. Sparklines mean that graphics are no longer cartoonish special occasions with captions and boxes, but rather sparkline graphics can be everywhere a word or number can be: embedded in a sentence, table, headline, map, spreadsheet, graphic. Data graphics should have the resolution of typography.

- Edward Tufte, Beautiful Evidence, 46-63. (scroll down)

And you can find lots more uses and examples of sparklines around the Internet.

About web fonts

**Web fonts:

Web fonts allow Web designers to use fonts that are not installed on the viewer's computer.

- Wikipedia

UPDATE: This is my fastest blog-post-into-irrelevancy turnaround yet.  Per Daniel Wood's comment (see below), none of this Web Viewer stuff is necessary :-P  Still, maybe you'll find some of the techniques here of interest, even if not appropriate in this situation.  Or just carry on with the rest of your Interwebz.  Thanks, Daniel ;)

Download the demo file (.zip)  The Slide Panel buttons are on the top right.

What I did:

Placed a Web Viewer onto a new Panel of the Slide Control (so as to keep the original) and made it the same size and position as the original element

Set the Web Viewer to use a Data URL and set the CSS for the background to be the same gradient used in the original

Selected each button, opened it in the Preview app (via File>New) & saved it as a JPEG Normally I'd just use CSS for buttons, not images, but I wanted to make this (quickly) like the original

Created Base64 strings of each button image via an online Base64 image converter

Changed double-quotes in the Base64 image tag to single-quotes so there's no need to escape them

Wrapped each Base64 button inside an <a> element (for a clickable link), set the href attribute to an FMP URL, and placed them on the Web Viewer

Created a GoToLayoutByParameter script to be called by the FMP URL

Set the CSS for the images so they would center and be positioned like in the original

The FMP URL:

"<a href='fmp://$/" & Get ( FileName ) & "?script=GoToLayout&param=LayoutName'>"

What I noticed:

This worked well, and the Web Viewer did indeed block the behaviors of the underlying elements (on-hover visual changes and clickable buttons), however I discovered that the contents of the Web Viewer didn't render until the full panel was displayed, which meant that the background gradient and the buttons weren't visible during the sliding animation :(

What I changed:

Created an additional Panel of the Slide Control

Set the Web Viewer itself to have the same gradient as the original element (as opposed to the default solid color of white)

Placed copies of the button elements on top of the Web Viewer so they display during the slide animation (Once the Web Viewer is rendered, these buttons are hidden underneath) The images aren't perfectly lined up, but it's good enough for the demo.

What I think:

Well it ain't perfect.  The copies of the buttons on top of the Web Viewer in particular feels inelegant & kludgy.

Is it an improvement on the non-WebViewer versions?  Dunno.

So I use:

<input type=​'text' name='nameFirst' value='' id='nameFirst'> <a href=​'domain.com'>Go to site</​a>

instead of:

<input type=\"text\" name=\"nameFirst\" value=\"\" id=\"nameFirst\"> <a href=\"domain.com\">Go to site</​a>

Really, this goes for anytime you have HTML attributes inside any kind of FileMaker calculation dialog.

…

Single quotes are fully valid, according to the W3C specs: