Typophile

Universal Media Control Characters - Existing or New Free Font

John Bilicki0 votes

Greetings,

I'm working on updating my site's code from XHTML 1.1 to XHTML 5, part of that includes the music player. For years I've used an image for the media control characters though now since I'm doing the design update I want to make it easy for people who create themes to change the colors of the controls hence fonts and hence why I eventually wandered to these forums.

Either one of two goals would work fine for me. First I've spent time browsing and searching through Unicode character sheets for existing characters with some success. Then after having little-to-no luck decided to mess around with the idea creating a font specific to media control characters, at least for now. I've downloaded and installed FontForge, created a new font and am having some difficulty determining how to create characters beyond #255 (in red at the top-left). If I go this route I don't want to use an existing font as I want to ensure what I create is purely free to use by others. Alternatively I'd be happy to use an existing purely free font.

Here is an image of the media control characters I'm trying to find or at least create...

Here are some of the characters I've found though don't seem to be well supported by any of the fonts I've tried...

Previous Track

Play Track

Pause Track

Stop Track

Next Track

For those having a look there are some inconsistencies between the characters (specifically previous and next track symbols).

So what are my options? Are there any truly free TTF/WOFF fonts with support for these universal media control characters? If not how do I create these characters in a new font using FontForge or other open source or freeware software?

Thanks Riccard! The Font-Awesome works great! The second link I wasn't sure of and I'm completely unsure of what is going on at the third site.

What I've done is isolated the code and used HTML Escape tool that lets you copy/paste characters and it gives you the numeric entity (my preference versus say the named entities).

CSS

@font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
p {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

HTML

< p >
& #xf049;
& #xf048;
& #xf04a;
& #xf04b;
& #xf04c;
& #xf04e;
& #xf051;
& #xf050;
< /p >

There may be additional fonts with the same characters without the fill however I don't want to commit an excessive amount of time to the subject right now; creating the foundation is the most important thing. Thanks for your help, I greatly appreciate it!

#xf049; etc. are Private Use characters. They are best being avoided, because their meaning is not defined, so when the specific web font doesn’t load, they can’t be displayed in a fallback font.

You had the correct codes in your first post, you should definitely continue to use these (#x23ee; ...)

The FontFont UI Icons collection contains all these symbols, designed to work together, but the fonts are not free: https://www.fontfont.com/news/new-release-ff67 (scroll down to ‘New Release: FF UI Icons’).

Agree with Jens. For a large number of the characters Font Awesome provides (e.g. euro, dollar, bank, chart, credit card, checkboxes, refresh, wheelchair...), there's no reason valid codepoints couldn't have been used!

Furthermore, the approach that is being advocated by the FA site is that these icons are mere adornments meant to enhance the display. If the concept of "play", "pause", etc is your message, these should be conveyed in the content of your page, not in the stylesheet. Or as it has already been said...

I will admit it is not a perfect solution however I need a basis for the long term and it works best for the moment. I'm not sure how to do any of this in SVG and on other sites more relevant to that I received no response. Private characters, I agree, they can change. The article wasn't written by someone coming off as mature, much more opinion based. Seeing as I'm building my own platform and making certain completely-free fonts available one of my goals is (as with all things I work on) to improve performance and standards; fontawesome.woff is 64KB which is simply too much just for just media control characters. I'll try to learn to create a standalone woff file and assign the characters to the appropriate numeric ids; there aren't enough (at least that I see offhand) though it would improve upon the works-already resolution I've come to. Eventually I'd love to create my own fonts though such a goal beyond my immediate goal is quaternary at best.

The most relevant thing I can ask at this point is how do I create a minimal font with these characters in FontForge? By default it doesn't allow more than 255 characters and excessive poking around hasn't helped me to figure out how to define any characters beyond the numeric id of 255 in FontForge.

There will always be people who take it upon themselves to say, "No, don't do that." as if they have some sort of official standing that entitles them to dictate beyond having the freedom to share an opinion. If such people have a better idea that they are also willing to teach how to implement then great, otherwise they've just another naysayer and naysayers are just people that people such as myself ignore; there is always an answer even if it's not what you think it is.

I've created fonts with thousands of characters in FontForge. I don't know why you're seeing it limited to only 255. Maybe it has to do with the encoding you are using. Try Encoding > Reencode > Unicode.

Granted, the page I linked to was rantish. There are plenty of other pages that state the case in a better way, but the message is the same. If you are creating a nice ">>" glyph, why not put it in the common codepoint (u+23e9)? Using PUA just recreates the old early-1990s problem of using Symbol to type Greek characters - give the document to someone that doesn't have that font, and it looks like gibberish.

In FontForge there is full and BMP, which Unicode do I want?

Also when using File-->Generate Fonts... it doesn't allow me to select Web Open Font under the No Outline Font drop-down menu...what do I need to do to export this to a usable woff file I can use on the web?

BMP is going to give you access to the 65536 characters in "Plane 0", the Basic Multilingual Plane. Full will give you access to codepoints in all 16 planes, though I believe the total number of characters you can have in your font is still only 65536. The basic UI controls are all in the BMP, but if you ever want to expand upon that, there are some in Plane 1 too. I don't know of any reason not to go Full right away, except maybe that it's a bit easier to navigate the editor window when it has fewer character slots to scroll through.

I only generate TTF and OTF, so I can't answer the question about WOFF.

I do have an OFL font I'm working on that includes the UI characters you've mentioned, but it's not ready for release yet.

JAB, if it would be helpful, I could cut a demo including the symbols you need.

FontForge is crashing at every EVERY opportunity, touching the scrollbars, dragging windows from the second screen to the first because it's too dumb to remember the window preference, it Macintosh "maximizes" on my laptop (which means it just resizes the window arbitrarily and about ten thousand other different retarded combinations of retardedness) and that was after all the fuss on my desktop. All I was trying to do was a very simply cut/paste (and I don't copy because when I did it kept pasting the first character even though I explicitly copied the second). FontForge is absolutely infuriating to work with, I think even Moby -Dick would get bored and go home and check his email at this point.

In FontAwesome I need the following characters to appear on my website from left to right in the following numeric order...

61,513
61,512
61,514
61,515
61,516
61,518
61,521
61,520

Since there are eight characters but only seven spaces I attempted to start at character 9192 since overshooting to 9,200 is an alarm clock and apparently the only reference to character 9192 was something about ... drunk Japanese people? You know Unicode would make a lot more sense if there were numerical indexes that used hex as a secondary index reference...

ChristTrekker, I would greatly appreciate it seeing as I can't even save more than a single character before the program makes the Hindenburg look like an overwhelming success. I'm not sure what the characters look like and I'm not sure if all the characters I want are there so would it be possible if someone could also please copy/paste from FontAwesome like I as attempting just those characters to those numeric positions and export to a WOFF format?

This script subsets fontawesome for me and saves the subset as WOFF:

#!/usr/local/bin/fontforge -lang=ff

m = [61512, 61513, 61514, 61515, 61516, 61518, 61520, 61521]

Open("fontawesome-webfont.ttf",1)
SelectNone()
i = 0
j = SizeOf(m)
while (i < j)
d = SelectMoreSingletonsIf(m[i])
++i
endloop
SelectInvert()
Clear()
Generate("fontawesome_subset.woff","woff",0)
Close()

Té Rowan, thanks though I have no idea what to do with that (I guess Python) code? I'm guessing most people here are running Linux as their primary OS, I'm running a cleaned up version of Windows 7.

I'm not good enough at Python to script FontForge in that. It's just plain old FFscript. In any case, it gives an idea of what operations are needed to subset fontawesome: Load the font, make sure only the Unicode values in the array are selected, invert the selection (so they are the ones NOT selected), remove everything selected, save whatever remains as a WOFF file.

OS? Nah, most folk here work on Macs or Windows boxes. Linux is a small minority; Fontlab et al are not Unix-native.

Captured from web.archive.org on 9 Aug 2019. view this capture