Introduction to Fontra Font Editor

Hello, hello, testing, testing. Good afternoon, everyone joining already. So perfectly on time. I think we can start. I started by sharing my screen. I'm looking at the camera, but I don't see my camera. That's okay. So at the end, we'll have some time for questions. But we'll start with a brief. introduction of what what fontra is and why it is there and where we are in making it I think everything is good to go in terms so we are recording this session if everything goes well it will be posted on YouTube soon after fontra what is it we call it a browser-based font editor it doesn't mean it's necessarily in online font editor but it runs mostly in the browser and there's also an application that is the server part of it and that can either run locally or can run remotely today we will focus on the version of fontra that we call a font wrap pack which is a local an application for local use we'll still use the browser to do the work but nothing ever leaves your computer that way. Everything is totally local. So we've refreshed the fontra.xyz website just a little bit. If you're interested more about how fontra is constructed from a software perspective or modularity perspective, I recommend you to go through the PDF. I work for Black Foundry. making it possible through all the work that they have. But what I would like to demo, what is new on the website, is that we have direct download links to fresh versions. This is actually one day behind because we're having an issue at GitHub that I just discovered. So this is a version from yesterday. Just to show you how easy it will be to set up. I just clicked the link and it's downloading. See earlier attempts are here, almost done. Once it's done, Once it's done, I will just open that link. It will open a DMG and we can take the application, drop it on our applications. Well, of course, I already had one, but I will replace it. Oh, I cannot because I forgot to quit the old one. Then OK. So let me try again. Replace. That should be better. So that went pretty quickly. Don't need this anymore. Yeah, now I have installed Fontra. I have an alias here that I can click that will start the same thing. Fontra Pack, I must say. So the first time you open it, once you've downloaded it, you get this message. Hey, you downloaded this from the internet. Are you sure? Well, it's nicely notarized and signed, so it's all trustworthy, built at least for MacOS. The same thing should work for Windows, but I must say it's far less tested, so there might be some snags here and there. Anyway, when you open the Fontra Pack application, you get this little window. I noticed now that in my introduction I completely skipped past the thing I wanted to say about why Fondra exists. Let me see, I was so well prepared. So at Black Foundry there are many large projects that involve many people. Some of those projects involve East Asian character sets, so many characters. and therefore also larger teams of designers and they were looking for a better way to collaborate. That's part of Fontras history. So there are some predecessors. There's a thing called RoboCJK, which is an extension for RoboFont that is still used a little bit, but Fontras largely replacing that. At the same time, Fontrye is also becoming a more and more general purpose font editor and while it can still become an online application for others to use. Right now we have an internal online version that I will demonstrate very briefly later on. But like I said today, we're going to focus on Fontrapac, which is just an application that you install on your computer and it has a single window and you can drop font files on here. So while there are some formats it can read and not write such as TrueType, OTF and even with some limitations, Glyphs and Glyphs package. what it can read and write is ufo mostly ufo and design space so to start a demo i will open a existing design space the the brilliante typeface by black foundry retail typeface once you've dropped a design space file or ufo on the application then you will be greeted with this single test work And you are in the application. Now, what we should remember, I can switch back to the application. We should not quit the application because even though part of the application is running inside the browser, this application is more than just this window. It's actually running a little local web server that is only visible on the local machine. It's not visible outside of the local machine. But this kind of communicates between the browser and it takes care of writing files to disk. and reading. So that is the first entry point for FontraPack. Very broadly the state of development, we it's like announced it's still a work in progress. We've been working on it for I think about two years now. It's still work in progress. There's many things that are becoming more and more featureful. It is not yet the a tool that can replace. your other font editor it is not complete in terms of features we're working very hard to make it more and more feature complete we will be focusing on more general purpose features in the next few months but still it will take time and so for now um fontrpack is for instance useful as a companion to another font editor say robofont i mean that is the most obvious choice because um fontra pack fontra here works very well with design space and ufo based things um so yeah let me go through the list of things that i wanted to show so we have we opened a design space file so we are now in a window with a canvas we had a text and we can zoom in or out with the trackpad there's i'll just go through the user interface elements we can zoom in or out this and bull's eye icon makes the selection make you make you zoom to the selection if any we can click on an individual glyph and it becomes selected and if we would then use it it would zoom to that element if you click to another one we would easily quickly navigate to that other one but again i'm mostly using the trackpad on on my laptop which works pretty smoothly there is a full screen mode that you know i will use it for a little bit so you can always exit it so let's see what happens if we double click a glyph then we get into so-called edit mode we can still scroll zoom and we can select points with the rectangle or we can click on them we can shift click to or shift rectangle click and we can move those things around Of course, I made a very bad selection because there's a bunch of points really close together here. Let me see those if I just zoom in really wildly. So yeah, these points are only two units apart. So there is a unit grid visible if you zoom in far enough. If it's getting too small, it disappears. But if you zoom in far enough, you have a view of where the unit grid is. So with your arrow keys, you can navigate. you know if you want and also at the moment any edit will actually snap on the grid so you can kind of see that move things around so yeah editing multiple things it has the the usual behaviors i will go into a bit more detail and soon what time is it yeah I need to show a bit more about what's going on here. The first one is the text entry field. And this here is the text when you go out of full screen mode. That's somehow... So here we can type. Let me just... If you double click outside, you deselect, the glyph goes out of edit mode. So double click on a glyph, enter edit mode, double click elsewhere, you exit edit mode. Anyway, so we can type the text here. This includes things like we can comment, I cannot type, of course, is there no? Anyway, maybe glyph names are typable. Let's say polar, that's that one that works. So, but here, yeah, multi-line text is without more. So there's no real limit here. You can zoom out pretty far. You can have a lot of text. Some basic alignment options. And anywhere we can click and zoom to that selection, double click to go into edit mode. To select individual glyphs, we can go to the find glyphs panel. get an overview of all the glyphs that are in this particular font by name and you see a generic representation of the character we can also filter here by glyph name or we can search by character and so and if we would click here then the currently selected glyph will be replaced with the one with the one that we see here so this is another way to navigate the text that we're looking at. So text-based, the text entry, glyph-based text entry. Let me clear that filter. So yeah, we see the character, the glyph name, and the Unicode, if any. Of course we can deal with unencoded characters as well. Unencoded glyphs, I should say. So to the edit tool. So I showed the navigation tools here. Well, there's actually also part of navigation. There's a hand tool. I generally just use the scroll gestures on my trackpad. We have here the general selection tool that allows us to select points and to move them around. This is what we call the pen tool. It doesn't look like a pen, but this has a little plus on it. which signifies that we will add stuff to the glyph so now i'm drawing in this glyph that's being selected by just clicking i'm adding just straight line segments and by the way undo it's just supported as you would expect if the the pen tool maybe i should show also okay i will go a little bit deeper into the pencil i will briefly show the measurement tool This is derived from a tool called Power Ruler developed at Black Foundry. You click somewhere and it finds the closest point on the line and draws a perpendicular line all across your glyph and you get these measurements that obviously will update live. So this is the measurement tool. We should go into the pen tool more. So, before I go drawing stuff, there's another important panel, because as you noticed, I opened a, oh, by the way, yeah, if you want to get, we're in the, in the ruler tool, if you want to hide the ruler tool, then you can double click and it will be gone for now. You can always, if you click again, it will appear again, but you can relatively easily switch back and forth. So, other panels, we've had a text panel, the text entry, but here is, I opened the design space file. So, yeah. uh fontra is really made to build variable fonts from the ground up um so while you we can open individual ufos that's practically not what we're doing we're generally opening a design space file which implicitly opens all the associated ufos right there so if i quickly go back to the finder i opened this design space file which references all these ufos but generally i just in fontra i open the design space file and i have access to all of those so here we have the so-called source list and We see on this, this can, this is generally something that is per glyph because not every glyph needs to define the same set of sources or masters, if you will. We tend to call sources, call them sources. So these are, these should correspond to the UFOs that we saw in Finder. But yeah, this is an interpolatable system. So the sliders will allow you to live interpolate. anywhere you want. Now editing has to be done at a source so we need to either navigate to a specific source or if we just somewhere and we see something like hey we want to edit here if we try that you're not at a source we will get a dialogue. Okay we can't edit the glyph number d because the location is not at a source. The usual thing to do is then to go whoa show me where is the nearest source. Well it happens to be regular condensed so now I can do my editing. in this particular source. So that's where I will go. Okay, I think I have one. Okay, let me see. We have the... I see I have an optional behavior accidentally turned on that I didn't want to. But anyway, so this is the... I will go into a little bit more detail about what all these things mean. I will briefly go on to the gear tab, which gives us some options regarding visualization, but also behavior. And the one that is by default off that I accidentally still had on was the scaling edit tool behavior. I will turn that off. We can talk about more details later, but now I have a more default feeling way of how the editing works. So, yeah, we can edit anywhere we want. pen tool also doubles as a slice tool we will make a knife tool at some point but at the moment with the pen tool if you hover over other areas like if you hover over a curve we can insert a point here or if we go on a straight line and we press the Alt key and then click it will insert handles here so we can turn that way we can turn a straight line into a curve vice versa if we delete those then it becomes a straight line again Deleting points works mostly like you would expect, so it tries to follow the curve as possible. Of course, it's not always possible to delete too many points. I don't know this typefetch very well, but indeed there are two points really close together, like only one unit apart. So that's indeed what we see happening here. So deleting points, adding points. I added a point. Wait, let me undo a bit further. Right, so notice what will happen in this second column here. I will add a point and all of a sudden there is this little red bug icon. It's tiny, but it's a little bug. We find it very cute. This shows that now this source is no longer compatible with the rest. So now... yeah our interpolation also no longer works so it will try to snap at the nearest that's possible but it's currently not a viable interpolatable system we can disable a source in some cases that is effective so if i double click this one here we kind of temporarily disable this source and then the rest of the system then then now this master this source no longer participates so we can kind of check what happens in the design space if this one just wasn't there. So, but yeah, if it's enabled, then of course we have a problem we cannot interpolate and we need to fix that. We can click on this thing and it gives us a little message which at the moment is pretty much useless. It's a very generic thing, but this is an area where we expect to get to make improvements that you can get a more detailed message of what makes this particular source incompatible with the others. So, but yeah, so to undo this, either I will undo or I will just delete this point. It should go to the nearest source. Where am I here? Accidentally, I deselected. So it should be interpolatable again. And there we are. So interpolation, I need to check we only have this much time. Every once in a while, I will check my the time and where we are. This is navigating with the ruler. I'm already, of course, a little bit behind. So I mentioned that Fontra can read TTF, OTF, and that includes variable fonts. I will not demo that now. But it will look like you're in an editor, but it will not save changes. So a little warning for that. Likewise, so we can read the Gliss format to some extent. I will just open, drop this particular. demo font no not there but here on my fontrpack and this font only contains a handful of glyphs so the here we see missing glyphs being shown uh this is a test font from the glyphslip test suite so anyway this is read directly from a glyph file we can navigate it and even this gives me also a nice opportunity to demonstrate the info panel which gives us a Apart from some information of the glyph itself and the dimensions of the current selection, it gives information about components. Its main role at the moment is to give information about components. And in this particular test case, we're actually looking at a smart component in glyphs. This is something that is fully supported in FONTRA. We more or less support a super set of that. In FONTRA we can do, if there's time left, I will talk a little bit about variable components later. It's a rather specific topic. But yeah, reading from a glyphsphile, the same would work from a variable TTF or static TTF or variable OTF or static OTF. So we can just inspect. What Contra does not do currently is features and kerning. So it's relatively primitive in what we at the moment can show in the canvas area. So. about creating. I will now, so instead of editing existing glyphs, I will now insert what I will create a new glyph. If I would type, well I could type a character that doesn't exist, but you know, I don't know offhand in this particular font which Latin characters do not exist, so I will just enter an arbitrary glyph name that I know does not exist, so slash glyph name. and I see it here it shows the glyph name if this were a glyph name that would map to a character it would also show the character anyway so this is not yet an existing glyph it's a placeholder but I can double click it and then we get a dialogue do we want to create this clip let's say yes so now I have a glyph and it's all it's in edit mode and I can draw stuff in this glyph so um so this is a good moment to talk a bit more about the pen tool so i've been clicking around so we can add things uh if you click back on the original point we close the contour and that contour is closed you see by the fact that it's filled in white gray um undo works let me show you a bit more because i just clicked but if we click drag we will get a handle and of course we can apply shift to constrain it and further on we can Also, I'm using shift to constrain so we can at the same time if we now decide this must we now want a Straight line I can click again on the last handle when you see this little highlight This will this means that if I click it it will delete the handle click it now and gone is the handle and that can continue with straight lines likewise if I went here and I want a well actually in this case i can just click drag and it will create a handle likewise here but for instance here maybe i don't want another curve here so i click this here and so i can click here and now i have closed the contour so those are the the main properties of our pen tool that's it's covers everything it works quite a bit different than most other pen tools so maybe it will take some getting used to also of course we're working on making things better ah this is also a good moment to uh so so here currently this is a non-smooth point it's not a tangent but i can and that's kind of a common thing at least in robocon if you double click a node it will turn on the smooth flag so now it's proper tangents if i would double click it again it would be a non-smooth curve again and it will correct the things so then yeah we can the kind of the most obvious constraints are there there's a couple of interesting additional uh features um if you drag this point and you will hold alt it will actually move the the anchor point between the two others this also works for this particular case if i alt click here i can move it exactly on that line that exists if we do that on a point like this it will just leave the handle alone so we can move like the anchor independently of the of the handle so by default it will move the handle but if i press alt it will leave it where it was um like there's alt has another couple another bunch of uh interesting features like if i uh drag this one this is your normal behavior but now with adding alt i can make it move like this shift also applies likewise here this works similarly here this is without alt this is with alt and the opposite direction as well normally this would constrain here of course in the tangent direction but if I press alt it tries always to keep the constraint if possible so the alt behavior is kind of a neat thing that I think is rather non-standard compared to other pen tools or other other other editing tools um so yeah i've shown inserting points we can yeah um with the pen tool so we can uh insert points if we want um there's also we have an extensive uh contextual menu for right click or control click um undo menu and copy and paste are available there but there's the the typical break contour available we can break it apart and let's break here so and we can connect things by dragging them towards each other each other so now i've connected by the way if you want to continue drawing if you just select an endpoint we can continue drawing right away so this would also allow us to close this thing so now we have a weird contour So breaking contours, joining contours in the contextual menu, you will always also find reverse contour. We can add a component, we can set the start point. So your basic things you can find there. Yeah, copy paste works to some extent. I mean, we're working around a little bit with browser limitations like that because this is all running in a standard web browser and what the browser has access to in terms of clipboard material depends a bit per browser and also what we can export and what you can read is a little bit limited but by default font I will put the glyph format on the clipboard so if I copy this shape copy and hit copy command C and if I go to Robofont, random Robofont 4, all shiny, then if I make a mistake I can paste my shape here and there it is. And this also goes the other way. There's a limited copy paste available between Glyphs and Pontra. The limitation is because that goes through the SVG format and SVG format is not really good at keeping the original positions. but likewise i mean uh i i can uh edit things here um let's see uh and and copy uh paste it back so i pasted edit the thing that i edited okay i made a big mess now but uh i think you got my point so uh likewise um yeah um oh yeah for instance we in fontra we do not have a new overlap here so potentially we could quickly go to RoboFont, go back to... So with copy paste we can move things around. However, if things get better... What happens here? Okay, it's a connection like that, of course. Because why... So I am quickly running out of time. But I still want to show a little bit more about how FontRack can work side by side with RoboFont. Let's see, let's see, which source was I, oh, it's the default, so it should be, I drew this in the regular source, so this, this, this, I'm going to just open a single. source and here we have the same font but then there's a single source and if I would scroll all the way to the end I should find my yeah my testing glyph and there it is so indeed it's just so as you've noticed I did not or maybe I haven't but I did not press save on that does not have a save button if I change here something now it saves immediately or at least as fast as I can which is pretty fast but then if we go back to Robofont, Robofont notices that hey update found and we do an update and there's my edit. Vice versa and now I should rearrange my windows a little bit so this is Fontra in the background, Robofont in the foreground. If I make an edit here, no change, but in Robofont we do have to press save. I press save, command s, right now, boom and Fontra notices also but since it synchronizes with disk immediately it doesn't need this confirmation like hey change on disk because it knows like we're up to date and it updates so yeah you can edit and robot font see the results in fontra and vice versa here what did i do i pressed the wrong button somewhere anyway so yeah undo and again update likewise the same actually happens that's as a as a brief aside um it's also we can also use it as a companion app to font goggles from cobbles is obviously in the read-only application and this is a fairly large project so it will take a while to load all those masters and load it but phone goggles opens design space also directly just like And okay, there we are, it's a little bigger, but FontGoggles also listens to changes on disk. So if I go to this cap A, okay, where are we? There we are. So I think we're looking at the default here. So if I make an edit here, let's mess it up. And FontGoggles also responds to that. So pretty much as soon as it can, it will. And FontGobble obviously does show kerning and other features, so could be at least on Mac OS be a nice companion to Fontra. Let's see. So this... But likewise, I mean here FontGobble shows the design space thing as if it's already a variable font, the same as Fontra does. So we can navigate to similar places and let's see. make this edit here and yeah we can kind of see the effect in the intermediates messing things up really badly now anyway so I have because I'm already 32 minutes a couple more important things to show let's see I will stay here and let's get a nice lowercase letter here and let's go to the source list and we're gonna have to let's put in edit mode zoom out a little bit so we've seen this on off button and the compatibility column which generally when you see nothing there all is good we have an interpolatable system there is here a column with a little eye and here we can show like which sources should always be visible in the background we can also click in the header this makes everything visible or invisible. This shows us all the sources in the background. However, you might also have noticed that once we're at a source, then you see a little edit thing. On the one hand, that means yes, we can edit here, because if we're not at a source, we cannot edit here and we have to go to the source. However, we can edit multiple sources at the same time and we will see them as background things. But Let's see. So but and also we can so everything you can edit in Fomtra, we can also edit through all the sources at the same time. So, for instance, let me select like this top part here. Let me move this up using shift and all the UFOs associated here that I've selected. I mean, I could also only do a handful or one specific one or none, but it moves all relatively in the same way. This is a move in. Of course, weird things will start happen if you move it around, this is the dancing typeface. So that's... So we can drag things in. I'm getting some noises maybe from the chat. Or I won't just check because I do not see the chat. I will read it later. But the same, the thing is perhaps more useful. I mean, this editing stuff is, of course, you're large even though you see what you're doing. It's a little bit blind in the other master. So I can imagine that that's not always super practical. However, to insert a point, This will also work across all masters. If I only do it in a single master, single source, like here, you will see now we have a bug because now this source is no longer compatible. But now let's do it in all sources at the same time. And here we are now all sources and I can relatively, there's with command arrow up and down, I can zap through all the sources and you see it has inserted a point at an equivalent position. This is all relative and based on proportions. So if I would do the same on a straight line, like if we would look at this line segment here, if I would do it, say, roughly here, maybe at 10% based on the length of this line segment, it will do it in all other sources also at 10%. So here, and we can still edit everything, we see what's going on. And we can zap through the changes. This goes... quite far though not just editing but also for instance to add a component we can let's uh add a little what is it let's just match it up let's add a graph component and now i've added this one component and i can also move it around all at the same time because still all sources are in edit mode um i should also show now so we see only the values in the info panel this is the offset for the for the component We only see the one in the main layer that we actually have selected. But yeah, so, and likewise, we can change... One pretty cool thing is that if we've selected this component, we can actually edit the glyph name here. So if I want to replace this with an acute, I can just type here and enter. And now through all the sources, the component has become an acute. And... undo is all still still very much available and there forward backwards by command keys or by menu so i think that was a very important thing that i wanted to highlight i should go to yeah so yeah the source list let me briefly go to my testing glyph and testing what is called here and then to draw something let's draw something more okay I need to go to the source and it just delete all this and I will quickly draw a curve less thing because it's faster because here if you've noticed I only have one source but now for instance I want to draw a bolt we don't have a bolt yet well you navigate to bolt I mean we are thinking of idea of making this UI better but we navigate to that location then we click plus and we add a source we can still We could customize the source name. We could fine-tune the axis values. But let's just stick with this. And now we've inserted a source at this location that I can now edit. So this is bold. So let's make it bolder. And instantly, I have an interpolating shape. Likewise, so yeah, OK, this shape is a little stupid for a width axis. But let's imagine the width axis goes up. well let's first go back to the neutral and then oh wait i actually did it in the in the wait wait no no no sorry the width so this font goes narrow so let me add uh and let's pretend this is not really narrow um okay let's okay so let's insert this and instead of making it narrow i'm just gonna make it taller uh so now on this axis we would have a tolerable still an interpolatable system and look this is also still working and we also still have the combination so we do not have a narrow bolt at the moment but yeah this is only a rectangle so it's pretty trivial but we can still now navigate to this bold narrow and add another source and let's let's tweak this so for instance here this one needs to be like this anyway uh etc etc um this is how you can gradually build a design space for an individual glyph. So of course if you have pre-planned everything, you may want to have predefined sources, and that is something we're working on. So, multi-source editing... Yeah, okay, we actually, I would have some more topics, but just as a general notice, we plan to do this every month at roughly at the end of the month, maybe always on a Friday. However, we will probably do it at different times. Sometimes, I mean, we're in Europe and Western Europe. So we, we might like sometimes do it early in the morning. So more Asian people can join or later in the evening. So more. America's people can join. So that may vary. Always we want to publish the recording. Before we go over to the question and answer section, yeah, okay, there's a section that I've planned. What next for FONTRA? What are the things that we are working on and that we are planning for the next few months? Well, so maybe one of the things that you've seen that is missing is proper background layers. We do not have support for guidelines yet. We do not have support for support for anchors yet. I mean, that's stuff that is really important and that we want to implement as soon as possible. Also like the vertical metrics like SMRDs and the cap heights and customizable things that comes together with guidelines. Likewise, you might've noticed that we do not have a font overview. That's perhaps a little curious. That's kind of coming from our main use case, which is Asian fonts. And those tend to be so large that this overview you cannot see everything in a meaningful way in a very easy way so we find we have ideas to kind of make finding and selecting and sorting glyphs based on properties or unicode values more easy but this is roughly where at the moment we find searching glyphs very important based on glyph name or based on character That does not mean that we will not make a FONDA overview. We definitely will. But so far, because of the context in which this project evolves, sometimes if you look at it from the outside, it may look like our priorities are all weird and wrong. And yeah, that's probably correct from where you're standing. But you know, this project evolves within actual... I will... While I'm talking this, I will very briefly show our private online deployment. So we have an online, I'm now not looking at FONTRA as FONTRA pack, but this is literally an online thing. This is not a public thing. There's an internal website that requires, but this is some test data based on Chinese characters. And here we also see our variable components principle. that is very similar to smart components as I mentioned before. But here we have all sorts of things like the CJK design frame. This test font is not set up properly so these margins are all wrong. But there are some specific CJK features available. And these are... We have, I mean, this to some extent also works with FontraPack, but we have this URL. Let me briefly go back to the tab where I'm in FontraPack, even though I should really, really, really switch to the question and answer section. So imagine I've typed ABCDEF and I'm editing here and I want to open a second window. What I do is I go to the address bar of the browser. I copy the URL. I could even go to a different browser on my computer and paste the URL and there I go to the exact same place. I mean generally you would use the same browser, I mean it works in the same browser so I can just here let me start it again. And these tabs or windows will actually respond live to one another. So I can do an edit here and you will see it respond in the other window. Now, to some extent this also we have this working in a more collaborative way so this is a more large-scale collaborative environment uh but this kind this url idea so i can just go to and these are shareable across colleagues so if one colleague is working on the cliff or notices someone something hey there's something wrong here please dear colleague could you have a look what's going on here then they can just share the url and that's where they go and this includes the design space location So where we are, I will not look at that CTK. This is really not reliable. This is test data that I keep messing up. But anyway, so. That is a feature that becomes more useful outside of FontraPack. FontraPack is pretty much just one way how we use Fontra. So, yeah, our near-term goals is to make it more and more useful for the general case. To make, I think I mentioned the important things. So that it will become more useful for more and more tasks. And... Yeah, I think, okay, so we set up a side channel. I'm looking at my phone now, and our editorial team is now finding the questions from the chat that I cannot see. The first question is, I hope that Fontra is also compatible with Windows. Yes, it is. With some caveats, it's, so if I... go to i mentioned it at the beginning the fontra homepage from xyz we have fontra pack for macos and the phone track for windows however there are some it's less well tested and but the intention is that it should be equally well supported practically that's a little more difficult for us because at black foundry and in my personal studio We don't use a whole lot of Windows, so it might be lagging behind, but that's definitely an important goal for us. So likewise, I've been demoing in Chrome, but that's completely irrelevant. We need relatively new browsers. It will not work on an old Safari, for instance, and on other OSs. But we strive to support the main browsers. That includes Chromium-based browsers, Safari and Firefox. And yeah, so it should be, we have an automated update system. At the moment we've hit a snag. This should have read October 20. But yeah, on weekdays, every day we have a new build that incorporates the latest changes. We try very hard to keep this stable. But we do not have formal releases yet. Because, you know, it's moving sometimes fast, sometimes slow. So. A good question from Raphael Bushner. What are your plans for making Fontrush scriptable? I have no super easy answer for that. We currently inside Black Foundry, we use a bit of... We use Python scripting to control the font backends. How can I explain this? I mean, we have... So inside Fontra in the front end here in the browser, we do not yet have any scripting possibilities directly. But there are ways to use Fontra code to automate things. We are what we actually I mean, we want more scripting for sure. What we're focusing right now also and a good question for that, because I forgot to mention it. We are working on various plugin APIs that people can provide. plugins initially just written in javascript or go pretty much any web technology but we will allow external plugins to be used so we're building a plugin manager page where you can say like hey there's a plugin hosted over there please use it here so we're opening up third-party development in that way pretty much as we speak i mean still lots of work ahead of us to make that smooth Yeah, so yeah, with web technology, there's more and more with with WebAssembly, other languages become more and more available on the web platform. Like it's currently possible to not not talking about Funtra, but in general, in the web world, it's possible to load a complete Python interpreter into the browser and use Python relatively natively in the browser. So we could connect that to Funtra at some point and even have. Python scripting available right in the browser. That is a pretty ambitious thing, so I'm not expecting that in the next couple months. There's UfoZ is asked, there's currently no support for UfoZ, that's the zip thing that could work, but you know... the whole life updating, life saving, the regular or totally ordinary UFO format is way more suitable for that. So the UFO Z format is, I mean we could support it, but it is not a super well suited format. So it's probably better to have like the zipping up of your UFO stuff as a separate thing. Our friend Dave Crossman is asking how to Rust. Well, likewise, I mean, you can probably have a WebAssembly stuff inside the browser. I don't know much about Rust, but yeah, the Google Font people are working very hard on better, faster font compilers written in Rust that should be way faster than the current Python-based tools, and it's definitely on our wishlist to at some point incorporate that into Fontry so that we would have. fast font generating components integrated into FontRoute. So that is indeed also a good question in the sense that we currently do not have a generate fonts button. Yeah, so that's hopefully that answers that. Are there more questions that I should, well, that's not a lot of questions. What else can I show? Thanks for your attention, for sure. I really appreciate all of you who tuned in to this nice little live. The question is, can you delete glyphs? That is indeed like a missing feature that has been a high priority for a while, but it's coming very soon. So delete glyphs, no. And that's then, you know, so. that would also work across the whole design space. So deleting a glyph would mean to delete it from all associated UFOs. So that's a useful feature as well. So deleting glyphs. So yeah, again, if you tuned in later, the FONTRA XYZ is our improvised homepage. It provides the links to the, it's actually a collection of repositories at the moment. this links to the main one but there's a bunch of secondary uh secondary repositories so the slides document gives you an overview of how fontra was constructed um a very good question can you start a new file from scratch instead of editing an existing file i was hoping to have that working for today's demo but i missed that deadline so right now we cannot start from nothing. However, at this moment, the bare minimum that we need to start is an empty UFO and a DesignSpace file that references at the default source. So this is actually an example. Where's my app? I'm just very briefly. So this is an empty. project that has what's not empty we're also still working on so this has two axes predefined but it contains zero glyphs so here we have to make everything so let me let me just uh a b c so i can create i can draw and all of a sudden now we do have an a so yeah and then we can populate the design space by maybe drawing a light version of this same wonderful glyph. There's the light version and here we go. So yeah, starting from scratch is still something we're working on. Possibly it will be a button in the Fontopak application like start new project. yeah so a good question is there a published roadmap that we can follow there's two things that are both not ideal but that you can follow so let's let me briefly just go to the main github repository so please start that stuff if you have a github account yay like and subscribe we have in the readme we have a section called roadmap And that has, we keep that up to date. I mean, it's not a super complete list. The things with a green check mark have been implemented. The things without is stuff that is on our list. So that is like the rough overview of where you can see what kind of things we do support and what we do not yet support. If it's on the roadmap, it's definitely something that we're aware of that is missing. Then the second thing is that we have... of course, many open issues and we have, we can filter by core features. So this is an important, what we consider a core feature is what we need to support before we pretty much can actually call it the font editor for real. So there's a whole bunch of things that we're aware of that FontBite is currently lacking in. So those two things you can follow. Yeah, we encourage you to play around within what it can do now. If you find bugs and you're a developer, we welcome bug fixes. At the moment, we're not actively seeking out third-party contributions because many internals still have many moving parts. I'm not going to say a hard no at all. I'm just saying we're not super actively seeking. that out. We're working with a small team within Black Foundry to build things. It's not only me who's working on this, so that's good news. But yeah, it's a big project and we are very ambitious and we have high demands on the quality of the features and so and also like I tried to allude Before, we're actually within Black Foundry, we're using it for production work, the real design being made with this tool. And of course, and that's the context within which Fontra is developed. So whenever something is broken for them, that goes to the top of the priority immediately, and that will be fixed right away. When they have feature requests that will make their work, and there's a bunch of open feature requests from our internal teams, that very often get priority over more general purpose features. But right now, we really want to balance that out a bit more and that we really will be able to more focus also on the features that will make it a more generally useful team. That tool. Okay, so let's see. So two roadmaps. ah good question another from rafael buchner um whether we support the latest design space format the quest the answer to that is yes and no the yes is that if you have a design space 5 format file that does not use discretion discretionary active what's called then it works but it currently will fail in a rather user unfriendly way if you indeed feed it a discretionary access. Like an italic access that has two values, that is not an interpolating. So that's something we are very much aware of that has been pushed up on our internal priority list already a few times, but it's still... not there. But yeah, that is something that we would love to support soon. So Design Space 5 properly with discretionary axes. I would say we should be able to support that by the end of the year. So there's a whole bunch of things that we would like to achieve by the end of the year, of course. But this is one of those things that I really feel should have, has and should have discrete axes. That's the word. Thank you, Jeremy. Thank you, Coximo, I must say, I'm getting this delayed, manually edited. Hi, Coximo. Discrete access, that's the word, you know? So we have a couple minutes left. I don't want to really go over the time. People at Black Foundry will try to collect, to save the chat, and we are recording and recording the transcript. Not a lot of editing should be... Ah, when kerning support... One more question, Raffael, you're on a roll. When kerning support is coming? Well, that is not coming this year. So that is something probably rather for the 2024. It's super important. So my ideal situation would be that we would integrate a lot of font goggles functionality regarding Design Space files and UFO files into Fontrye itself. So that shaping live compilation of features. That's the kind of idea that I'm going for. But again, that's a super ambitious idea. We should definitely make some progress in this direction in 2024. But that's unlikely to see any improvement, I would say, before the end of the year. Good question. Ummm... Yeah, if you find bugs, yeah, our issue tracker is of course open once you have a GitHub account. Again, I want to highlight for the people who tuned in later, since very recently on our very low-key homepage, we have direct download links for Fontrack Pack. That's a local application that I used for most of today's demo. And I will again repeat. It's also saying here, your fonts will stay on your computer and will not be uploaded anywhere. Just because Fontrapack works with the browser doesn't mean that this is literally an online application. So while we also have an online version of Fontra, mostly internally at the moment, this might evolve into something probably later, we don't know yet, but Fontrapack is completely local and safe and there's no spying going on from our end whatsoever. Just, I mean, it's, there's common lessons. Okay, we're at the end of the time. So I think we should really wrap it up. Yes, thank you all for your interest in Fontra. Play with it where you think that it could be, perform some useful tasks within your workflow. If you find bugs or things that are unclear, you think something is misbehaving, feel free to either email me or open issue on GitHub, email us, we're open on all the usual channels. Tag me on Mastodon. I'm not so active on Twitter anymore, but yeah, I'm available. So thanks very much. And I will then stop sharing my screen for one. Thanks everyone. and stop my camera and slowly we'll stop talking and Jeremy will be wrapping up the recording and the transcript. Thanks everyone and maybe see you next time. We'll be announced in the same channels. Thanks so much.

Hello, hello, testing, testing. Good afternoon, everyone joining already. So perfectly on time. I think we can start.

I started by sharing my screen. I'm looking at the camera, but I don't see my camera. That's okay. So at the end, we'll have some time for questions.

But we'll start with a brief. introduction of what what fontra is and why it is there and where we are in making it I think everything is good to go in terms so we are recording this session if everything goes well it will be posted on YouTube soon after fontra what is it we call it a browser-based font editor it doesn't mean it's necessarily in online font editor but it runs mostly in the browser and there's also an application that is the server part of it and that can either run locally or can run remotely today we will focus on the version of fontra that we call a font wrap pack which is a local an application for local use we'll still use the browser to do the work but nothing ever leaves your computer that way. Everything is totally local. So we've refreshed the fontra.xyz website just a little bit.

If you're interested more about how fontra is constructed from a software perspective or modularity perspective, I recommend you to go through the PDF. I work for Black Foundry. making it possible through all the work that they have. But what I would like to demo, what is new on the website, is that we have direct download links to fresh versions.

This is actually one day behind because we're having an issue at GitHub that I just discovered. So this is a version from yesterday. Just to show you how easy it will be to set up. I just clicked the link and it's downloading.

See earlier attempts are here, almost done. Once it's done, Once it's done, I will just open that link. It will open a DMG and we can take the application, drop it on our applications. Well, of course, I already had one, but I will replace it. Oh, I cannot because I forgot to quit the old one.

Then OK. So let me try again. Replace. That should be better.

So that went pretty quickly. Don't need this anymore. Yeah, now I have installed Fontra. I have an alias here that I can click that will start the same thing. Fontra Pack, I must say.

So the first time you open it, once you've downloaded it, you get this message. Hey, you downloaded this from the internet. Are you sure? Well, it's nicely notarized and signed, so it's all trustworthy, built at least for MacOS.

The same thing should work for Windows, but I must say it's far less tested, so there might be some snags here and there. Anyway, when you open the Fontra Pack application, you get this little window. I noticed now that in my introduction I completely skipped past the thing I wanted to say about why Fondra exists. Let me see, I was so well prepared.

So at Black Foundry there are many large projects that involve many people. Some of those projects involve East Asian character sets, so many characters. and therefore also larger teams of designers and they were looking for a better way to collaborate.

That's part of Fontras history. So there are some predecessors. There's a thing called RoboCJK, which is an extension for RoboFont that is still used a little bit, but Fontras largely replacing that. At the same time, Fontrye is also becoming a more and more general purpose font editor and while it can still become an online application for others to use.

Right now we have an internal online version that I will demonstrate very briefly later on. But like I said today, we're going to focus on Fontrapac, which is just an application that you install on your computer and it has a single window and you can drop font files on here. So while there are some formats it can read and not write such as TrueType, OTF and even with some limitations, Glyphs and Glyphs package.

what it can read and write is ufo mostly ufo and design space so to start a demo i will open a existing design space the the brilliante typeface by black foundry retail typeface once you've dropped a design space file or ufo on the application then you will be greeted with this single test work And you are in the application. Now, what we should remember, I can switch back to the application. We should not quit the application because even though part of the application is running inside the browser, this application is more than just this window. It's actually running a little local web server that is only visible on the local machine. It's not visible outside of the local machine.

But this kind of communicates between the browser and it takes care of writing files to disk. and reading. So that is the first entry point for FontraPack. Very broadly the state of development, we it's like announced it's still a work in progress.

We've been working on it for I think about two years now. It's still work in progress. There's many things that are becoming more and more featureful. It is not yet the a tool that can replace.

your other font editor it is not complete in terms of features we're working very hard to make it more and more feature complete we will be focusing on more general purpose features in the next few months but still it will take time and so for now um fontrpack is for instance useful as a companion to another font editor say robofont i mean that is the most obvious choice because um fontra pack fontra here works very well with design space and ufo based things um so yeah let me go through the list of things that i wanted to show so we have we opened a design space file so we are now in a window with a canvas we had a text and we can zoom in or out with the trackpad there's i'll just go through the user interface elements we can zoom in or out this and bull's eye icon makes the selection make you make you zoom to the selection if any we can click on an individual glyph and it becomes selected and if we would then use it it would zoom to that element if you click to another one we would easily quickly navigate to that other one but again i'm mostly using the trackpad on on my laptop which works pretty smoothly there is a full screen mode that you know i will use it for a little bit so you can always exit it so let's see what happens if we double click a glyph then we get into so-called edit mode we can still scroll zoom and we can select points with the rectangle or we can click on them we can shift click to or shift rectangle click and we can move those things around Of course, I made a very bad selection because there's a bunch of points really close together here. Let me see those if I just zoom in really wildly. So yeah, these points are only two units apart.

So there is a unit grid visible if you zoom in far enough. If it's getting too small, it disappears. But if you zoom in far enough, you have a view of where the unit grid is.

So with your arrow keys, you can navigate. you know if you want and also at the moment any edit will actually snap on the grid so you can kind of see that move things around so yeah editing multiple things it has the the usual behaviors i will go into a bit more detail and soon what time is it yeah I need to show a bit more about what's going on here. The first one is the text entry field.

And this here is the text when you go out of full screen mode. That's somehow... So here we can type. Let me just...

If you double click outside, you deselect, the glyph goes out of edit mode. So double click on a glyph, enter edit mode, double click elsewhere, you exit edit mode. Anyway, so we can type the text here.

This includes things like we can comment, I cannot type, of course, is there no? Anyway, maybe glyph names are typable. Let's say polar, that's that one that works. So, but here, yeah, multi-line text is without more.

So there's no real limit here. You can zoom out pretty far. You can have a lot of text. Some basic alignment options.

And anywhere we can click and zoom to that selection, double click to go into edit mode. To select individual glyphs, we can go to the find glyphs panel. get an overview of all the glyphs that are in this particular font by name and you see a generic representation of the character we can also filter here by glyph name or we can search by character and so and if we would click here then the currently selected glyph will be replaced with the one with the one that we see here so this is another way to navigate the text that we're looking at.

So text-based, the text entry, glyph-based text entry. Let me clear that filter. So yeah, we see the character, the glyph name, and the Unicode, if any. Of course we can deal with unencoded characters as well.

Unencoded glyphs, I should say. So to the edit tool. So I showed the navigation tools here. Well, there's actually also part of navigation. There's a hand tool.

I generally just use the scroll gestures on my trackpad. We have here the general selection tool that allows us to select points and to move them around. This is what we call the pen tool. It doesn't look like a pen, but this has a little plus on it. which signifies that we will add stuff to the glyph so now i'm drawing in this glyph that's being selected by just clicking i'm adding just straight line segments and by the way undo it's just supported as you would expect if the the pen tool maybe i should show also okay i will go a little bit deeper into the pencil i will briefly show the measurement tool This is derived from a tool called Power Ruler developed at Black Foundry.

You click somewhere and it finds the closest point on the line and draws a perpendicular line all across your glyph and you get these measurements that obviously will update live. So this is the measurement tool. We should go into the pen tool more. So, before I go drawing stuff, there's another important panel, because as you noticed, I opened a, oh, by the way, yeah, if you want to get, we're in the, in the ruler tool, if you want to hide the ruler tool, then you can double click and it will be gone for now. You can always, if you click again, it will appear again, but you can relatively easily switch back and forth.

So, other panels, we've had a text panel, the text entry, but here is, I opened the design space file. So, yeah. uh fontra is really made to build variable fonts from the ground up um so while you we can open individual ufos that's practically not what we're doing we're generally opening a design space file which implicitly opens all the associated ufos right there so if i quickly go back to the finder i opened this design space file which references all these ufos but generally i just in fontra i open the design space file and i have access to all of those so here we have the so-called source list and We see on this, this can, this is generally something that is per glyph because not every glyph needs to define the same set of sources or masters, if you will. We tend to call sources, call them sources.

So these are, these should correspond to the UFOs that we saw in Finder. But yeah, this is an interpolatable system. So the sliders will allow you to live interpolate. anywhere you want.

Now editing has to be done at a source so we need to either navigate to a specific source or if we just somewhere and we see something like hey we want to edit here if we try that you're not at a source we will get a dialogue. Okay we can't edit the glyph number d because the location is not at a source. The usual thing to do is then to go whoa show me where is the nearest source.

Well it happens to be regular condensed so now I can do my editing. in this particular source. So that's where I will go.

Okay, I think I have one. Okay, let me see. We have the... I see I have an optional behavior accidentally turned on that I didn't want to. But anyway, so this is the...

I will go into a little bit more detail about what all these things mean. I will briefly go on to the gear tab, which gives us some options regarding visualization, but also behavior. And the one that is by default off that I accidentally still had on was the scaling edit tool behavior.

I will turn that off. We can talk about more details later, but now I have a more default feeling way of how the editing works. So, yeah, we can edit anywhere we want. pen tool also doubles as a slice tool we will make a knife tool at some point but at the moment with the pen tool if you hover over other areas like if you hover over a curve we can insert a point here or if we go on a straight line and we press the Alt key and then click it will insert handles here so we can turn that way we can turn a straight line into a curve vice versa if we delete those then it becomes a straight line again Deleting points works mostly like you would expect, so it tries to follow the curve as possible. Of course, it's not always possible to delete too many points.

I don't know this typefetch very well, but indeed there are two points really close together, like only one unit apart. So that's indeed what we see happening here. So deleting points, adding points.

I added a point. Wait, let me undo a bit further. Right, so notice what will happen in this second column here.

I will add a point and all of a sudden there is this little red bug icon. It's tiny, but it's a little bug. We find it very cute.

This shows that now this source is no longer compatible with the rest. So now... yeah our interpolation also no longer works so it will try to snap at the nearest that's possible but it's currently not a viable interpolatable system we can disable a source in some cases that is effective so if i double click this one here we kind of temporarily disable this source and then the rest of the system then then now this master this source no longer participates so we can kind of check what happens in the design space if this one just wasn't there. So, but yeah, if it's enabled, then of course we have a problem we cannot interpolate and we need to fix that.

We can click on this thing and it gives us a little message which at the moment is pretty much useless. It's a very generic thing, but this is an area where we expect to get to make improvements that you can get a more detailed message of what makes this particular source incompatible with the others. So, but yeah, so to undo this, either I will undo or I will just delete this point.

It should go to the nearest source. Where am I here? Accidentally, I deselected.

So it should be interpolatable again. And there we are. So interpolation, I need to check we only have this much time. Every once in a while, I will check my the time and where we are. This is navigating with the ruler.

I'm already, of course, a little bit behind. So I mentioned that Fontra can read TTF, OTF, and that includes variable fonts. I will not demo that now. But it will look like you're in an editor, but it will not save changes. So a little warning for that.

Likewise, so we can read the Gliss format to some extent. I will just open, drop this particular. demo font no not there but here on my fontrpack and this font only contains a handful of glyphs so the here we see missing glyphs being shown uh this is a test font from the glyphslip test suite so anyway this is read directly from a glyph file we can navigate it and even this gives me also a nice opportunity to demonstrate the info panel which gives us a Apart from some information of the glyph itself and the dimensions of the current selection, it gives information about components.

Its main role at the moment is to give information about components. And in this particular test case, we're actually looking at a smart component in glyphs. This is something that is fully supported in FONTRA.

We more or less support a super set of that. In FONTRA we can do, if there's time left, I will talk a little bit about variable components later. It's a rather specific topic. But yeah, reading from a glyphsphile, the same would work from a variable TTF or static TTF or variable OTF or static OTF. So we can just inspect.

What Contra does not do currently is features and kerning. So it's relatively primitive in what we at the moment can show in the canvas area. So. about creating.

I will now, so instead of editing existing glyphs, I will now insert what I will create a new glyph. If I would type, well I could type a character that doesn't exist, but you know, I don't know offhand in this particular font which Latin characters do not exist, so I will just enter an arbitrary glyph name that I know does not exist, so slash glyph name. and I see it here it shows the glyph name if this were a glyph name that would map to a character it would also show the character anyway so this is not yet an existing glyph it's a placeholder but I can double click it and then we get a dialogue do we want to create this clip let's say yes so now I have a glyph and it's all it's in edit mode and I can draw stuff in this glyph so um so this is a good moment to talk a bit more about the pen tool so i've been clicking around so we can add things uh if you click back on the original point we close the contour and that contour is closed you see by the fact that it's filled in white gray um undo works let me show you a bit more because i just clicked but if we click drag we will get a handle and of course we can apply shift to constrain it and further on we can Also, I'm using shift to constrain so we can at the same time if we now decide this must we now want a Straight line I can click again on the last handle when you see this little highlight This will this means that if I click it it will delete the handle click it now and gone is the handle and that can continue with straight lines likewise if I went here and I want a well actually in this case i can just click drag and it will create a handle likewise here but for instance here maybe i don't want another curve here so i click this here and so i can click here and now i have closed the contour so those are the the main properties of our pen tool that's it's covers everything it works quite a bit different than most other pen tools so maybe it will take some getting used to also of course we're working on making things better ah this is also a good moment to uh so so here currently this is a non-smooth point it's not a tangent but i can and that's kind of a common thing at least in robocon if you double click a node it will turn on the smooth flag so now it's proper tangents if i would double click it again it would be a non-smooth curve again and it will correct the things so then yeah we can the kind of the most obvious constraints are there there's a couple of interesting additional uh features um if you drag this point and you will hold alt it will actually move the the anchor point between the two others this also works for this particular case if i alt click here i can move it exactly on that line that exists if we do that on a point like this it will just leave the handle alone so we can move like the anchor independently of the of the handle so by default it will move the handle but if i press alt it will leave it where it was um like there's alt has another couple another bunch of uh interesting features like if i uh drag this one this is your normal behavior but now with adding alt i can make it move like this shift also applies likewise here this works similarly here this is without alt this is with alt and the opposite direction as well normally this would constrain here of course in the tangent direction but if I press alt it tries always to keep the constraint if possible so the alt behavior is kind of a neat thing that I think is rather non-standard compared to other pen tools or other other other editing tools um so yeah i've shown inserting points we can yeah um with the pen tool so we can uh insert points if we want um there's also we have an extensive uh contextual menu for right click or control click um undo menu and copy and paste are available there but there's the the typical break contour available we can break it apart and let's break here so and we can connect things by dragging them towards each other each other so now i've connected by the way if you want to continue drawing if you just select an endpoint we can continue drawing right away so this would also allow us to close this thing so now we have a weird contour So breaking contours, joining contours in the contextual menu, you will always also find reverse contour. We can add a component, we can set the start point. So your basic things you can find there.

Yeah, copy paste works to some extent. I mean, we're working around a little bit with browser limitations like that because this is all running in a standard web browser and what the browser has access to in terms of clipboard material depends a bit per browser and also what we can export and what you can read is a little bit limited but by default font I will put the glyph format on the clipboard so if I copy this shape copy and hit copy command C and if I go to Robofont, random Robofont 4, all shiny, then if I make a mistake I can paste my shape here and there it is. And this also goes the other way.

There's a limited copy paste available between Glyphs and Pontra. The limitation is because that goes through the SVG format and SVG format is not really good at keeping the original positions. but likewise i mean uh i i can uh edit things here um let's see uh and and copy uh paste it back so i pasted edit the thing that i edited okay i made a big mess now but uh i think you got my point so uh likewise um yeah um oh yeah for instance we in fontra we do not have a new overlap here so potentially we could quickly go to RoboFont, go back to... So with copy paste we can move things around.

However, if things get better... What happens here? Okay, it's a connection like that, of course. Because why... So I am quickly running out of time.

But I still want to show a little bit more about how FontRack can work side by side with RoboFont. Let's see, let's see, which source was I, oh, it's the default, so it should be, I drew this in the regular source, so this, this, this, I'm going to just open a single. source and here we have the same font but then there's a single source and if I would scroll all the way to the end I should find my yeah my testing glyph and there it is so indeed it's just so as you've noticed I did not or maybe I haven't but I did not press save on that does not have a save button if I change here something now it saves immediately or at least as fast as I can which is pretty fast but then if we go back to Robofont, Robofont notices that hey update found and we do an update and there's my edit. Vice versa and now I should rearrange my windows a little bit so this is Fontra in the background, Robofont in the foreground.

If I make an edit here, no change, but in Robofont we do have to press save. I press save, command s, right now, boom and Fontra notices also but since it synchronizes with disk immediately it doesn't need this confirmation like hey change on disk because it knows like we're up to date and it updates so yeah you can edit and robot font see the results in fontra and vice versa here what did i do i pressed the wrong button somewhere anyway so yeah undo and again update likewise the same actually happens that's as a as a brief aside um it's also we can also use it as a companion app to font goggles from cobbles is obviously in the read-only application and this is a fairly large project so it will take a while to load all those masters and load it but phone goggles opens design space also directly just like And okay, there we are, it's a little bigger, but FontGoggles also listens to changes on disk. So if I go to this cap A, okay, where are we? There we are.

So I think we're looking at the default here. So if I make an edit here, let's mess it up. And FontGoggles also responds to that. So pretty much as soon as it can, it will.

And FontGobble obviously does show kerning and other features, so could be at least on Mac OS be a nice companion to Fontra. Let's see. So this... But likewise, I mean here FontGobble shows the design space thing as if it's already a variable font, the same as Fontra does.

So we can navigate to similar places and let's see. make this edit here and yeah we can kind of see the effect in the intermediates messing things up really badly now anyway so I have because I'm already 32 minutes a couple more important things to show let's see I will stay here and let's get a nice lowercase letter here and let's go to the source list and we're gonna have to let's put in edit mode zoom out a little bit so we've seen this on off button and the compatibility column which generally when you see nothing there all is good we have an interpolatable system there is here a column with a little eye and here we can show like which sources should always be visible in the background we can also click in the header this makes everything visible or invisible. This shows us all the sources in the background.

However, you might also have noticed that once we're at a source, then you see a little edit thing. On the one hand, that means yes, we can edit here, because if we're not at a source, we cannot edit here and we have to go to the source. However, we can edit multiple sources at the same time and we will see them as background things.

But Let's see. So but and also we can so everything you can edit in Fomtra, we can also edit through all the sources at the same time. So, for instance, let me select like this top part here. Let me move this up using shift and all the UFOs associated here that I've selected. I mean, I could also only do a handful or one specific one or none, but it moves all relatively in the same way.

This is a move in. Of course, weird things will start happen if you move it around, this is the dancing typeface. So that's... So we can drag things in.

I'm getting some noises maybe from the chat. Or I won't just check because I do not see the chat. I will read it later. But the same, the thing is perhaps more useful.

I mean, this editing stuff is, of course, you're large even though you see what you're doing. It's a little bit blind in the other master. So I can imagine that that's not always super practical. However, to insert a point, This will also work across all masters.

If I only do it in a single master, single source, like here, you will see now we have a bug because now this source is no longer compatible. But now let's do it in all sources at the same time. And here we are now all sources and I can relatively, there's with command arrow up and down, I can zap through all the sources and you see it has inserted a point at an equivalent position.

This is all relative and based on proportions. So if I would do the same on a straight line, like if we would look at this line segment here, if I would do it, say, roughly here, maybe at 10% based on the length of this line segment, it will do it in all other sources also at 10%. So here, and we can still edit everything, we see what's going on.

And we can zap through the changes. This goes... quite far though not just editing but also for instance to add a component we can let's uh add a little what is it let's just match it up let's add a graph component and now i've added this one component and i can also move it around all at the same time because still all sources are in edit mode um i should also show now so we see only the values in the info panel this is the offset for the for the component We only see the one in the main layer that we actually have selected. But yeah, so, and likewise, we can change... One pretty cool thing is that if we've selected this component, we can actually edit the glyph name here.

So if I want to replace this with an acute, I can just type here and enter. And now through all the sources, the component has become an acute. And...

undo is all still still very much available and there forward backwards by command keys or by menu so i think that was a very important thing that i wanted to highlight i should go to yeah so yeah the source list let me briefly go to my testing glyph and testing what is called here and then to draw something let's draw something more okay I need to go to the source and it just delete all this and I will quickly draw a curve less thing because it's faster because here if you've noticed I only have one source but now for instance I want to draw a bolt we don't have a bolt yet well you navigate to bolt I mean we are thinking of idea of making this UI better but we navigate to that location then we click plus and we add a source we can still We could customize the source name. We could fine-tune the axis values. But let's just stick with this.

And now we've inserted a source at this location that I can now edit. So this is bold. So let's make it bolder. And instantly, I have an interpolating shape. Likewise, so yeah, OK, this shape is a little stupid for a width axis.

But let's imagine the width axis goes up. well let's first go back to the neutral and then oh wait i actually did it in the in the wait wait no no no sorry the width so this font goes narrow so let me add uh and let's pretend this is not really narrow um okay let's okay so let's insert this and instead of making it narrow i'm just gonna make it taller uh so now on this axis we would have a tolerable still an interpolatable system and look this is also still working and we also still have the combination so we do not have a narrow bolt at the moment but yeah this is only a rectangle so it's pretty trivial but we can still now navigate to this bold narrow and add another source and let's let's tweak this so for instance here this one needs to be like this anyway uh etc etc um this is how you can gradually build a design space for an individual glyph. So of course if you have pre-planned everything, you may want to have predefined sources, and that is something we're working on.

So, multi-source editing... Yeah, okay, we actually, I would have some more topics, but just as a general notice, we plan to do this every month at roughly at the end of the month, maybe always on a Friday. However, we will probably do it at different times. Sometimes, I mean, we're in Europe and Western Europe.

So we, we might like sometimes do it early in the morning. So more Asian people can join or later in the evening. So more. America's people can join.

So that may vary. Always we want to publish the recording. Before we go over to the question and answer section, yeah, okay, there's a section that I've planned. What next for FONTRA? What are the things that we are working on and that we are planning for the next few months?

Well, so maybe one of the things that you've seen that is missing is proper background layers. We do not have support for guidelines yet. We do not have support for support for anchors yet.

I mean, that's stuff that is really important and that we want to implement as soon as possible. Also like the vertical metrics like SMRDs and the cap heights and customizable things that comes together with guidelines. Likewise, you might've noticed that we do not have a font overview. That's perhaps a little curious.

That's kind of coming from our main use case, which is Asian fonts. And those tend to be so large that this overview you cannot see everything in a meaningful way in a very easy way so we find we have ideas to kind of make finding and selecting and sorting glyphs based on properties or unicode values more easy but this is roughly where at the moment we find searching glyphs very important based on glyph name or based on character That does not mean that we will not make a FONDA overview. We definitely will. But so far, because of the context in which this project evolves, sometimes if you look at it from the outside, it may look like our priorities are all weird and wrong. And yeah, that's probably correct from where you're standing.

But you know, this project evolves within actual... I will... While I'm talking this, I will very briefly show our private online deployment. So we have an online, I'm now not looking at FONTRA as FONTRA pack, but this is literally an online thing. This is not a public thing.

There's an internal website that requires, but this is some test data based on Chinese characters. And here we also see our variable components principle. that is very similar to smart components as I mentioned before. But here we have all sorts of things like the CJK design frame.

This test font is not set up properly so these margins are all wrong. But there are some specific CJK features available. And these are...

We have, I mean, this to some extent also works with FontraPack, but we have this URL. Let me briefly go back to the tab where I'm in FontraPack, even though I should really, really, really switch to the question and answer section. So imagine I've typed ABCDEF and I'm editing here and I want to open a second window. What I do is I go to the address bar of the browser.

I copy the URL. I could even go to a different browser on my computer and paste the URL and there I go to the exact same place. I mean generally you would use the same browser, I mean it works in the same browser so I can just here let me start it again. And these tabs or windows will actually respond live to one another.

So I can do an edit here and you will see it respond in the other window. Now, to some extent this also we have this working in a more collaborative way so this is a more large-scale collaborative environment uh but this kind this url idea so i can just go to and these are shareable across colleagues so if one colleague is working on the cliff or notices someone something hey there's something wrong here please dear colleague could you have a look what's going on here then they can just share the url and that's where they go and this includes the design space location So where we are, I will not look at that CTK. This is really not reliable. This is test data that I keep messing up.

But anyway, so. That is a feature that becomes more useful outside of FontraPack. FontraPack is pretty much just one way how we use Fontra. So, yeah, our near-term goals is to make it more and more useful for the general case.

To make, I think I mentioned the important things. So that it will become more useful for more and more tasks. And... Yeah, I think, okay, so we set up a side channel.

I'm looking at my phone now, and our editorial team is now finding the questions from the chat that I cannot see. The first question is, I hope that Fontra is also compatible with Windows. Yes, it is.

With some caveats, it's, so if I... go to i mentioned it at the beginning the fontra homepage from xyz we have fontra pack for macos and the phone track for windows however there are some it's less well tested and but the intention is that it should be equally well supported practically that's a little more difficult for us because at black foundry and in my personal studio We don't use a whole lot of Windows, so it might be lagging behind, but that's definitely an important goal for us. So likewise, I've been demoing in Chrome, but that's completely irrelevant. We need relatively new browsers. It will not work on an old Safari, for instance, and on other OSs.

But we strive to support the main browsers. That includes Chromium-based browsers, Safari and Firefox. And yeah, so it should be, we have an automated update system.

At the moment we've hit a snag. This should have read October 20. But yeah, on weekdays, every day we have a new build that incorporates the latest changes. We try very hard to keep this stable. But we do not have formal releases yet.

Because, you know, it's moving sometimes fast, sometimes slow. So. A good question from Raphael Bushner. What are your plans for making Fontrush scriptable?

I have no super easy answer for that. We currently inside Black Foundry, we use a bit of... We use Python scripting to control the font backends. How can I explain this?

I mean, we have... So inside Fontra in the front end here in the browser, we do not yet have any scripting possibilities directly. But there are ways to use Fontra code to automate things. We are what we actually I mean, we want more scripting for sure. What we're focusing right now also and a good question for that, because I forgot to mention it.

We are working on various plugin APIs that people can provide. plugins initially just written in javascript or go pretty much any web technology but we will allow external plugins to be used so we're building a plugin manager page where you can say like hey there's a plugin hosted over there please use it here so we're opening up third-party development in that way pretty much as we speak i mean still lots of work ahead of us to make that smooth Yeah, so yeah, with web technology, there's more and more with with WebAssembly, other languages become more and more available on the web platform. Like it's currently possible to not not talking about Funtra, but in general, in the web world, it's possible to load a complete Python interpreter into the browser and use Python relatively natively in the browser. So we could connect that to Funtra at some point and even have. Python scripting available right in the browser.

That is a pretty ambitious thing, so I'm not expecting that in the next couple months. There's UfoZ is asked, there's currently no support for UfoZ, that's the zip thing that could work, but you know... the whole life updating, life saving, the regular or totally ordinary UFO format is way more suitable for that.

So the UFO Z format is, I mean we could support it, but it is not a super well suited format. So it's probably better to have like the zipping up of your UFO stuff as a separate thing. Our friend Dave Crossman is asking how to Rust.

Well, likewise, I mean, you can probably have a WebAssembly stuff inside the browser. I don't know much about Rust, but yeah, the Google Font people are working very hard on better, faster font compilers written in Rust that should be way faster than the current Python-based tools, and it's definitely on our wishlist to at some point incorporate that into Fontry so that we would have. fast font generating components integrated into FontRoute.

So that is indeed also a good question in the sense that we currently do not have a generate fonts button. Yeah, so that's hopefully that answers that. Are there more questions that I should, well, that's not a lot of questions.

What else can I show? Thanks for your attention, for sure. I really appreciate all of you who tuned in to this nice little live.

The question is, can you delete glyphs? That is indeed like a missing feature that has been a high priority for a while, but it's coming very soon. So delete glyphs, no.

And that's then, you know, so. that would also work across the whole design space. So deleting a glyph would mean to delete it from all associated UFOs. So that's a useful feature as well.

So deleting glyphs. So yeah, again, if you tuned in later, the FONTRA XYZ is our improvised homepage. It provides the links to the, it's actually a collection of repositories at the moment.

this links to the main one but there's a bunch of secondary uh secondary repositories so the slides document gives you an overview of how fontra was constructed um a very good question can you start a new file from scratch instead of editing an existing file i was hoping to have that working for today's demo but i missed that deadline so right now we cannot start from nothing. However, at this moment, the bare minimum that we need to start is an empty UFO and a DesignSpace file that references at the default source. So this is actually an example.

Where's my app? I'm just very briefly. So this is an empty.

project that has what's not empty we're also still working on so this has two axes predefined but it contains zero glyphs so here we have to make everything so let me let me just uh a b c so i can create i can draw and all of a sudden now we do have an a so yeah and then we can populate the design space by maybe drawing a light version of this same wonderful glyph. There's the light version and here we go. So yeah, starting from scratch is still something we're working on.

Possibly it will be a button in the Fontopak application like start new project. yeah so a good question is there a published roadmap that we can follow there's two things that are both not ideal but that you can follow so let's let me briefly just go to the main github repository so please start that stuff if you have a github account yay like and subscribe we have in the readme we have a section called roadmap And that has, we keep that up to date. I mean, it's not a super complete list. The things with a green check mark have been implemented. The things without is stuff that is on our list.

So that is like the rough overview of where you can see what kind of things we do support and what we do not yet support. If it's on the roadmap, it's definitely something that we're aware of that is missing. Then the second thing is that we have... of course, many open issues and we have, we can filter by core features.

So this is an important, what we consider a core feature is what we need to support before we pretty much can actually call it the font editor for real. So there's a whole bunch of things that we're aware of that FontBite is currently lacking in. So those two things you can follow. Yeah, we encourage you to play around within what it can do now. If you find bugs and you're a developer, we welcome bug fixes.

At the moment, we're not actively seeking out third-party contributions because many internals still have many moving parts. I'm not going to say a hard no at all. I'm just saying we're not super actively seeking.

that out. We're working with a small team within Black Foundry to build things. It's not only me who's working on this, so that's good news.

But yeah, it's a big project and we are very ambitious and we have high demands on the quality of the features and so and also like I tried to allude Before, we're actually within Black Foundry, we're using it for production work, the real design being made with this tool. And of course, and that's the context within which Fontra is developed. So whenever something is broken for them, that goes to the top of the priority immediately, and that will be fixed right away. When they have feature requests that will make their work, and there's a bunch of open feature requests from our internal teams, that very often get priority over more general purpose features. But right now, we really want to balance that out a bit more and that we really will be able to more focus also on the features that will make it a more generally useful team.

That tool. Okay, so let's see. So two roadmaps.

ah good question another from rafael buchner um whether we support the latest design space format the quest the answer to that is yes and no the yes is that if you have a design space 5 format file that does not use discretion discretionary active what's called then it works but it currently will fail in a rather user unfriendly way if you indeed feed it a discretionary access. Like an italic access that has two values, that is not an interpolating. So that's something we are very much aware of that has been pushed up on our internal priority list already a few times, but it's still... not there. But yeah, that is something that we would love to support soon.

So Design Space 5 properly with discretionary axes. I would say we should be able to support that by the end of the year. So there's a whole bunch of things that we would like to achieve by the end of the year, of course.

But this is one of those things that I really feel should have, has and should have discrete axes. That's the word. Thank you, Jeremy. Thank you, Coximo, I must say, I'm getting this delayed, manually edited.

Hi, Coximo. Discrete access, that's the word, you know? So we have a couple minutes left. I don't want to really go over the time.

People at Black Foundry will try to collect, to save the chat, and we are recording and recording the transcript. Not a lot of editing should be... Ah, when kerning support... One more question, Raffael, you're on a roll. When kerning support is coming?

Well, that is not coming this year. So that is something probably rather for the 2024. It's super important. So my ideal situation would be that we would integrate a lot of font goggles functionality regarding Design Space files and UFO files into Fontrye itself.

So that shaping live compilation of features. That's the kind of idea that I'm going for. But again, that's a super ambitious idea. We should definitely make some progress in this direction in 2024. But that's unlikely to see any improvement, I would say, before the end of the year.

Good question. Ummm... Yeah, if you find bugs, yeah, our issue tracker is of course open once you have a GitHub account.

Again, I want to highlight for the people who tuned in later, since very recently on our very low-key homepage, we have direct download links for Fontrack Pack. That's a local application that I used for most of today's demo. And I will again repeat. It's also saying here, your fonts will stay on your computer and will not be uploaded anywhere. Just because Fontrapack works with the browser doesn't mean that this is literally an online application.

So while we also have an online version of Fontra, mostly internally at the moment, this might evolve into something probably later, we don't know yet, but Fontrapack is completely local and safe and there's no spying going on from our end whatsoever. Just, I mean, it's, there's common lessons. Okay, we're at the end of the time.

So I think we should really wrap it up. Yes, thank you all for your interest in Fontra. Play with it where you think that it could be, perform some useful tasks within your workflow.

If you find bugs or things that are unclear, you think something is misbehaving, feel free to either email me or open issue on GitHub, email us, we're open on all the usual channels. Tag me on Mastodon. I'm not so active on Twitter anymore, but yeah, I'm available. So thanks very much.

And I will then stop sharing my screen for one. Thanks everyone. and stop my camera and slowly we'll stop talking and Jeremy will be wrapping up the recording and the transcript. Thanks everyone and maybe see you next time. We'll be announced in the same channels.

Thanks so much.

Transcript for:Introduction to Fontra Font Editor

Transcript for:
Introduction to Fontra Font Editor