A font tester made by ChatGPT

I know some of you have interested in ChatGPT. I have been testing what I can do with it. Ask it to write Python scripts for Glyphs App and so on. During the experiments, I made a Font Tester. It was a strange experience to make something with it. I had no idea about Javascript but I made something that worked.
I release it under CC0, because it was made by ChatGPT. It must be interesting to hear how you utilize ChatGPT in your workflow.



  • Roel NieskensRoel Nieskens Posts: 179
    Interesting. Did you instruct it to use opentype.js or is that something it figured out on its own based on your cues? Can you tell a bit more about how the back-and-forth went until you got to this tester?

    Small observation: curious as to why it decides to query the OpenType feature buttons by data attributes (instead of the more common class or name). I wonder if you dig into Github projects using opentype.js if someone is doing it that way. Then you could figure out who ChatGPT has borrowed its inspiration from...

  • I can write simple programs with Python/Processing but I have almost no experience with Javascript and very limited knowledge of HTML and CSS.

    I wanted to test how far I can go with it. I might be able to read the code with the knowledge borrowed from Python but I did not read the codes for the experiment. It took two days to make. 

    There are MANY back and forths that were part of my strategy. (It is far from a straight forward process)
    When I read how ChatGPT work, there is a key idea "step-by-step."
    So I thought that to create something complex, I should make something simple and then add functions later on.
    If ChatGPT successfully adds a new function I asked it to add a different function.

    Debugging was tricky and implementing opentype.js was frustrating.
    It seemed that ChatGPT did not implement opentype.js correctly because it did not have the latest information.
    There were two interactions I gave along with some small suggestions that everybody could do with rational decisions and patients: gave the correct URL and suggested how to get a correct family name with my instinct as a type designer but not as a programmer.
    For the first one: I did a Google search and gave information on the correct URL. Because the original URL that ChatGPT used had an error.
    For the second: I read errors from the console of the browser, ChatGPT failed to get the family name even though it tried to debag by itself so many times.

    When I saw the code, ChatGPT wrote something like
    font.names.fullName.en || font.names.fullName['en-US'] || font.names.fontFamily.en 
    so I suggest

    This interaction might be cheating but I thought that was OK. Because I did not read the specification of opentype.js but I did with my instinct as a type designer.
    Also, I gave texts that were on the page of opentype.js, it seemed that the ChatGPT interpret the code. (I had no idea whether ChatGPT used it or not since I did not read the code.)

    There are many strategies I learned to create something complex.
    1. It is really important to make many backups.
    For almost every conversion you had and change you made, you should make a backup.
    If ChatGPT started to mess up your codes because of the wrong assumptions of the previous codes, it is easy to give entire codes which previously written and start over rather than fix the code with wrong assumptions.

    2. It is important to make layouts and add functions later.
    I used a drawer to place sliders and buttons but I originally did not use it. It was time-consuming for me to make the change.
    Something simple is amazingly difficult for AI but something difficult is amazingly easy for AI.

    Also, I would like to know how people debug their codes with ChatGPT, I have been experimenting it.

    Small observation: curious as to why it decides to query the OpenType feature buttons by data attributes (instead of the more common class or name). 
    I can not tell exactly because I do not know how ChatGPT thought.
    Originally I thought that predefined feature tags are easier so I gave feature tags because ChatGPT failed to implement opentype.js so many times and failed to do everything automatically.
    For predefined feature tags, I was asked by ChatGPT to do some repetitive tasks.(This is so silly... I do not want to do the repetitive tasks.)
    After I gave the URL and suggest the way to get the font name, it automatically got feature tags but it kept using the feature tags I gave.
    Also, I asked it to create buttons that correspond to the tags so that might affect the result as well.

    I believe there are extra codes that I asked to write for my different attempts. ChatGPT usually reflects the older conversations. If there are redundant codes in it that results. 

    That is a good idea to let it write scripts for Drawbot. I have not tested it yet.
    As you see in my comment, there are a lot of human interventions required even though the human may not understand the code.

    Human intelligence is still required a lot even though ChatGPT writes codes for you.
    For example, in the tester, you can apply size and features to the selected text. Originally it was really difficult to implement the function with ChatGPT. I had to think of a nice way to tell it in English that might be more creative than writing codes.

  • James PuckettJames Puckett Posts: 1,956
    We have a font generator, we have a font tester, now we just need a backend for retail and we can replace MyFonts.
Sign In or Register to comment.