Font Customisation

[houserockr]

Is it possible to change the font face used by the toast editor? I'm not a fan of the Inter font face and I would like to use either iA Writer font or something like JetBrains Mono.

Sure, I could fork this project, change index.html to my taste and rebuild the docker image. But maybe theming options have already been in consideration as a future change.

As an intermediate solution, could I replace/overwrite some of the files in the container by mapping them via volumes?

[dullage]

Hey @houserockr 👋. I've given it some thought and unfortunately I can't think of a way to easily achieve this without doing a custom build.

If your comfortable building docker containers then this shouldn't be too tricky to achieve. Just look for references to Inter (across all files) and of course import the font if needed.

I'll leave this as a suggestion. If the demand is there, I may look to add something.

[houserockr]

It is probably easier to just describe how to change the font. Here's what I did to make it work for my needs:

1. Add the fonts (in woff2 format) to flatnotes/src/assets/fonts/
2. Add @font-face directives to flatnotes/src/global.scss:

@font-face {
    font-family: "iAWriterDuo";
    src: url("assets/fonts/iAWriterDuoS-Regular.woff2");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "iAWriterDuo";
    src: url("assets/fonts/iAWriterDuoS-Bold.woff2");
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: "iAWriterDuo";
    src: url("assets/fonts/iAWriterDuoS-Italic.woff2");
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: "iAWriterDuo";
    src: url("assets/fonts/iAWriterDuoS-BoldItalic.woff2");
    font-weight: bold;
    font-style: italic;
}

OR, alternatively, add another/different @import for a different font from the Google Fonts API

3. Modify the CSS in flatnotes/src/components/NoteViewerEditor.vue Change the font-family attribute of the classes .toastui-editor-contents and .ProseMirror to use whatever font has been defined in global.scss. In my case font-family: iAWriterDuo;

4. Rebuild the docker image and you're golden :)

[TheNomad11]

@houserockr For me the font is way too small, I would like to try your hack, but I am a bit lost regarding rebuilding a docker image. I started to google but don't know how to start, do you have some noob-friendly links? Thanks!

[houserockr]

@TheNomad11 I don't have any noob-friendly links, only the official docker page, sorry. I understand it might look intimidating at first, but it's not that bad as it looks.

Basically, all you have to do is change to the directory that contains the Dockerfile and call $ docker build -t <tag> . where <tag> is a (unique) tag that identifies the image you're building.

[TheNomad11]

Thanks alot @houserockr for explaining! It reminds me of a Docker course I have started but haven't finished. I will have a try during the weekend!