icon font don't seem to render properly

[MichaelDaum]

As can be seen on https://htmlpreview.github.io/?https://github.com/tabler/tabler-icons/blob/master/iconfont/tabler-icons.html, icons such as alert-circle are all filled, while their svg counterpart https://github.com/tabler/tabler-icons/blob/master/icons/alert-circle.svg looks just fine.

[codecalm]

@MichaelDaum can you show now? I fixed it

[benhaynes]

Downloading the TTF locally (Mac) and using the font to render within Figma (design program) is rendering the same issue... with all closed paths filled in.

[codecalm]

@benhaynes I'm working on it hardly, it looks like a problem with svg-outline-stroke lib

[MichaelDaum]

Still the same. Thank you for your hard work!

[GitHubRulesOK]

Different viewers can show different interpretation so I have modified values a little however this hack may work for fonts by not using a closed circle worth a try ?

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-circle2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <path d="M 12, 12 m -9, 0 a 9,9 0 1,1 18,0 a 9,9 0 1,1 -18,0" />
  <line x1="12" y1="7.5" x2="12" y2="12.5" />
  <line x1="12" y1="16" x2="12" y2="16.25" />
</svg>

That was NOT the problem here is the TTF font in Windows as downloaded from this repository

Here it is after applying corrections in Font Forge

There does seems to be a generation problem

[codecalm]

I tried to debug it today and it looks like a problem with the svg-outline-stroke library - the results of it uses fill-rule="evenodd" which isn't considered by svg-to-ttf library

[goodwin74]

Different viewers can show different interpretation ! so I have modified values a little however this hack may work for fonts by not using a closed circle worth a try ? That was NOT the problem here is the TTF font in Windows as downloaded from this repository Here it is after applying corrections in Font Forge There does seems to be a generation problem

@GitHubRulesOK How did you fix the font? I also have icons displayed incorrectly in font :( can you post a link to the corrected font?

[GitHubRulesOK]

@goodwin74 I corrected the order for the version available at the time (perhaps1.4 or 1.5) a link to my static modified copy would go out of date quickly. testing just now its 1.6.0 from https://github.com/tabler/tabler-icons/blob/master/iconfont/fonts/tabler-icons.ttf and again has the same characteristic fills I opened the font in [FontForge] (https://fontforge.org/en-US/downloads/) actually i used unofficial windows portable from https://sourceforge.net/projects/fontforgebuilds/ so running run_fontforge I select the downloaded version 1.6 tabler-icons.ttf then select all using Ctrl + A then select element correct direction (CTRL + SHIFT + D) then file generate in a new location a corrected copy with the same name then install the corrected version

[Boldonglen]

Is this something thats going to be fixed in the repo? I tried the steps that @GitHubRulesOK mentions but when generating the file it complains about errors within the font.

[GitHubRulesOK]

Download latest version of font and mod the name to avoid mixing versions (currently tabler-icons1.10.ttf) Install into windows to check if it looks bad using CharMap confirmed still a problem so download latest font forge build (Currently April) https://sourceforge.net/projects/fontforgebuilds/files/i686/Portable/ Dont alter any defaults CTRL A CTRL SHIFT D Ignore expected warnings about mapping

Generate new version to re-install CTRL SHIFT G Change name to tabler-icons.ttf Change type to TrueType

Ignore informative warnings unless you later see any specific problems re install and check with CharMap so here is latest Addition  Thats EC35 ( ( 🤣 ) ) My Character

[joostlek]

But will this get fixed in the repo itself? I'm now using the svg like

<svg width="100%" height="100%">
    <use v-bind:xlink:href="`/tabler-sprite.svg#tabler-${type}`" />
</svg>

But I would like to use it as font. I tried looking at the libraries used to produce it, but if I recall correctly some were deprecated. So is there another way to make this work? 🤔

Furthermore, I love this pack 🥰

[bennyyao]

The problem remains.

[mfkwvf]

The problem remains.

[DanielGibbsNZ]

The problem remains with 1.35.0. Icon font renders fine for me on macOS but the filled in problem occurs on Windows.

[codecalm]

I've found the problem. svg-outline-stroke return outlined svg with fill-rule="evenodd" instead fill-rule="nonzero". It's breakingttf` font. I must find the better solution for convert stroke svgs to outline version

[codecalm]

I created #92 PR, with new build process

@DanielGibbsNZ @bennyyao @joostlek @MichaelDaum @GitHubRulesOK can you test new iconfont? It's available on dev-fontcustom branch in iconfont/fonts dir.

If every will be okay, I'll merge it to main repo

[GitHubRulesOK]

My take is it does not work as expected ALL now appears white but I could have shot myself in the foot/font

[DanielGibbsNZ]

Same; all icons are rendering as missing glyphs now:

[FreexD]

I've created a PR to convert fill rule "evenodd" to "nonzero" using fontforge correct direction feature - https://github.com/tabler/tabler-icons/pull/104

@DanielGibbsNZ @bennyyao @joostlek @MichaelDaum @GitHubRulesOK @provinzkraut @aubryll can you test new iconfont? It's available on dev-iconfont-generation branch in iconfont/fonts dir.

[GitHubRulesOK]

I can confirm the current ttf loaded as OOB (Out Of the Box) looks good in char map no need to run through fontforge

[MichaelDaum]

This looks a lot better https://htmlpreview.github.io/?https://github.com/tabler/tabler-icons/blob/dev-iconfont-generation/iconfont/tabler-icons.html

Though still a bit clumsy compared to the nicer SVGs. Can we have them like this in the iconfont? :D

[GitHubRulesOK]

@MichaelDaum On trying your link in Edge at first the previewer did not show me the characters (probably due to size of the needed css files i.e. they are not accessible/loaded quickly enough) I am on fibre but it is a long wait for the full load.

@FreexD On testing the font in Notepad it works well enough HOWEVER the line heights seem "wrong" (separate issue) the symbol height is clearly above baseline and rises (protrudes) into the line above

[MichaelDaum]

@GitHubRulesOK yes takes some time to load the css.... but then shows up.

[FreexD]

@GitHubRulesOK github is replying with 429 so css takes some time to load. Regarding the line heights - maybe fontforge can do something about that after we merge it in. Leave it for another issue I guess.

@MichaelDaum do you mean https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts ?

[joostlek]

I'm trying to build it locally, can't get fontforge to work in Python on windows yet. Will try some more. But it looks like the PR is working.

I'd suggest to fix the line height issue in this PR. Otherwise people would use the taller icons, and they will mess up when they update if the fix is available

[FreexD]

@joostlek maybe this helps https://github.com/FontCustom/fontcustom#installation . It works on my Mac with python 3.9. Good point with the line height. I'll check it in this PR.

[FreexD]

@GitHubRulesOK I've tried to adjust descent of the font. I've pushed new generated files to the PR branch. Can you check that out?

[GitHubRulesOK]

@FreexD I am still seeing ttf etc. from https://github.com/tabler/tabler-icons/tree/dev-iconfont-generation today do you have a direct link ?

[FreexD]

@GitHubRulesOK try now. I didn't push earlier.

[GitHubRulesOK]

@FreexD Michal that is better there little overlap between lines but see there is still a little lift between the unicode symbols and their normal font characters I intentionally am using windows notepad to see the effect of inline insertion within the same text font The reason I am using simplistic notepad is that any better editor suffers other font scaling problems due to width so those are outside the more basic height issue described here

[aubryll]

@FreexD I can also testify it is working 💯

[FreexD]

@GitHubRulesOK I've pushed the new version. Hopefully it works fine now. Can you check on the branch? I'm sorry to ask you for it so many times. Maybe you can instruct me how to reproduce your line-height check here or in the PR itself?

[GitHubRulesOK]

@FreexD Looking Perfect in NotePad (which uses the TTF "raw")

Using as a font in WordPad OTHER issues appear that are unconnected with the initial rendering problem

[FreexD]

@GitHubRulesOK thanks ;) I think we can resolve that one in another issue. It's not like line-height that would need to be adjusted everywhere after fixing it.

One last thing, @MichaelDaum what did mean here? You wanted SVG fonts or thinner strokes?

Though still a bit clumsy compared to the nicer SVGs. Can we have them like this in the iconfont? :D

[MichaelDaum]

@FreexD yes, I really prefer the thinner strokes. Sorry if I was comming thru unclear. The thin svgs really are awesome, consider me a big fan ... of the thin strokes :D

[GitHubRulesOK]

@MichaelDaum As they stood they are more like "Bold" stroke so perhaps two versions may be desired by some users ? @FreexD is it possible to specify two stroke widths e.g. above be called Bold and a thinner one be classed as "Regular"

[MichaelDaum]

@GitHubRulesOK two versions would be cool

[GitHubRulesOK]

@MichaelDaum It may be easier said than done the svg as I understand it are not "parametric" that is whilst they are overall scalable so the size can change relative to stroke width the shape is determined by the initial stroke width so there could be extensive positional alterations needed. In effect it would then become a totally "different" font family rather than different style

[FreexD]

@GitHubRulesOK @MichaelDaum That would be hard to do. I think that this discussion can be another issue ;) Let's try to merge what we have now and let people use the fixed font as is for now ;)

[GitHubRulesOK]

@FreexD I would agree its now currently appears "Working as designed" so OP is addressed, stroke width is aesthetic thus a separate issue. The "wider" or lack of width 🙁 issue is also separate to the OP observed problem.

@codecalm I am happy to accept that PR appears to address the "filled icons" (especially TTF version) as raised by @MichaelDaum

[codecalm]

@GitHubRulesOK can you check now v1.39.1? :)

[GitHubRulesOK]

@codecalm @FreexD @MichaelDaum Takes a while to verify I have unloaded old copies (would have helped if there was a new symbol but looks like 1.39.1 is same number as dev copy I tested.

Download fresh official html page to confirm number of sybols showing uninstalled previous copy of ttf and verify html now shows no local font

Download ttf without install to fonts subdir and refresh page, Looks good symbols render in html page using as far as I can tell the 1.39.1 .ttf (why not include version info in ttf file (not that its visible but helps keep track of current installed file)

Ok lets install, double click to install into windows, no problem, open NotePad/WordPad and check visibility, all good no filling problem and only the standard text width issue in WordPad 😃