Font fallback for users not having Consolas

[sgohl]

Hi,

first, thanks for the fork, I finally have more initial tail lines, wow 👍

Your inline -font statement overwrites the global font-family but only contains one font, so users not having Consolas will see ugly default font, which in my case is some serif.

and the color used to be slightly darker than white. That's important

[NiNiyas]

Hi! Serif fonts are not default. Consolas is the default one as shown in the UI configuration. Original tailon also have Consolas.

[sgohl]

mhm, it seems that the font I see is not Consolas (I just looked up https://docs.microsoft.com/en-us/typography/font-list/consolas and it looks totally different) - can you confirm that my second screenshot is not the font I actually should see?

btw, I am on Linux and Firefox as well as Chromium are showing the obove.

What differs between your tailon and from gvalkov is that you have an inline css

if I disable the checkbox of --font: Consolas, I see the Font I used to see

I understand that this is a feature you added, but perhaps it's possible to change --font to --font-family with a list of fonts, so Users without the default font have the usual fallback? (I mean roughly, I'm no css expert)

Or, if you'd make the default font configurable with cmd args, would also be perfectly fine as a solution

[NiNiyas]

Hi! You are right, the second one is not the font.

Is this the correct one? If it is I can push it in a few minutes.

[sgohl]

I don't know what font that is, but it certainly looks better ^^

Just to make sure, you don't need to change anything that will affect other users.
I think your inline-css just should (if this is even possible) be a list of fonts (font-family) so users without the first font have the fallbacks since browsers will go through the list one by one and use whatever font the system has

Again I'm no css expert, but perhaps there is something like the opposite of !important which causes the browser to just ignore the inlined -font if the system does not have the font and use the parent/global's font-family list

[NiNiyas]

I don't know what font that is, but it certainly looks better ^^

This is the font without --font: Consolas element.

Again I'm no css expert,

Same here. I have not used CSS that much outside this project.

I added a Default font option , that removes the --font element (not really removes it, but sets the --font to Default). You can still choose other fonts as well.

Are you interested in something like that?

[sgohl]

Yes, I'd need to try it, but sounds promising

[NiNiyas]

Just pushed it. If you are using docker, you may have to wait a bit for the workflow to continue.

[sgohl]

mhm, close, but still different from the original. Looks like Arial, it's very densed, compared to a fixed-with font

I'd consider this:

.log-view {
    font-family: var(--font-family);

style attribute inherited from html.no-js:
instead `--font`, use:
    --font-family: "Consolas","Menlo","Monaco","Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New","monospace","serif";

I'm not sure if this list which is from gvalkov reads my system fonts, because some fonts are linux only, but this is what I see in my element inspector.

Edit: looks like I dont have any fonts from the list :D and my browser falls back to monospace, which actually looks good enough, so I think monospace is kind of mandatory for the list

Oh and please, if white is default, I'd appreciate if you'd set it to #ddd or at least #eee because plain white is hurting ^^

[NiNiyas]

I changed the default font-family to https://github.com/gvalkov/tailon/blob/master/frontend/scss/vars.scss#L4

Oh and please, if white is default, I'd appreciate if you'd set it to #ddd or at least #eee because plain white is hurting ^^

I added Gainsboro font color, which is #dddddd. https://www.color-name.com/hex/dddddd

[sgohl]

That's it! Now it looks good :-)

Thanks a bunch for your time and effort, really! ❤️