search

cntrump / hugo-notepadium

a fast gohugo theme, 100% JavaScript-free.
https://examplesite.lvv.me/
MIT License
332 stars 125 forks source link

Icon font does not work #91

Closed reitzig closed 4 years ago

reitzig commented 4 years ago

The included icon font does not render for me (FF 75.0, Ubuntu 18.04 LTS). The font file loads okay. Other web fonts render fine.

My own page:

image

Demo:

image

Note the navigation links at the bottom, showing image instead of a symbol.

Screenshots taken with urlbox.io to exclude my local setup as a cause. Same result with url2png.com.

cntrump commented 4 years ago

I updated iconfont. could u help me test it ?

reitzig commented 4 years ago

Sure thing!

(Would test releases help with such things? That, or branches/PRs? I think I'd prefer linking my submodule to a tag or branch instead of pulling master or linking individual references. :thinking: )

reitzig commented 4 years ago

I don't see any font file being loaded, despite there now being multiple ones. :thinking:

image

cntrump commented 4 years ago

I don't see any font file being loaded, despite there now being multiple ones. 🤔

iconfont data embed in CSS (base64 encode)

reitzig commented 4 years ago

Ah, I see. :heavy_check_mark:

Anyway, doesn't seem to work. Once thing I note:

@font-face {font-family: "iconfont";
  src: url('{{- $fontDir -}}/iconfont.eot?t=1591245391370'); /* IE9 */
  src: url('{{- $fontDir -}}/iconfont.eot?t=1591245391370#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVIAAsAAAAAClgAAAT6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDbAqHAIVpATYCJAMgCxIABCAFhG0HchvlCCOSD06S7B+JsbHyw8yHSpV4ty2SETnY2DYZqc7kQ3jWv8lMsMkaanoCunftt7oHsvvp4sR8AEmAADi/b87aHqA7YUadC8raI49+4e9ykjeZ0tGl6U0KhQJWJ3UtIFEstVlv1iyAEQxFS/1SKnfAfwB8lH+It7rMs4EAkBGJdJD6z/Z+SGDQVxEAZFacOh5SwgNWwSaQ7ELBniyaPAUeEvcw9wGAJ73fJ98gl0gAB55C39g9pWESqu/HfHmGmnSTUQ4F7XAhAOx+AAWQDoAB5KHCyDo0yKWDQpZvx6AC8IQEDsL9GE3WZmlLtbtfntF1kgozu/UIgadB944A4qCSHBh4CH88AWhxB+Ykl4ij1FoERECTCVBAm0mAANosAhygLSXAAO0uAR748owVB0yXlnsDCASgQ2YRZr6NGOs5CJB9fDLqBerNdHOYfYVfFw57acuZt9NGWgdCR+x96/TmkKkvmUKG73nz3Lbk5pHWrWffSF5pvzfuEafqcBmdjutEEW4mZxrOOsm2LIfD4HR1fezoIR2DQ8Vvtw21P1/zGv2Oy4YdLxLV7gw6eNF/766AExfwqiPJeiio3ffZ5Ep7wZn3gsPw/qMtLpf/Ebv/Hgfs9v7nD6Df9HKS66rRqc2eMHPRhJXLqGG55869RBzYl+S1Yw8E026V92RjFcjwgLtlGhl1LpSJQmUoBoApYLzX7J3OfKeamrzfnvHcG7K33WFwKK67xhMuY9aKcjXAiA3zxt4r0ebbgpg+9kjyEXsCC7LN16BYYr57JZX/BErWqbiaMydWVrdlNWX0uW1Kr82rJ9M6A6r//LbVa9Q8tHNv+1zIHlngdqhn4o15awXPxuI1v/z4cKBfo8e94//QL146eM0D0XThZRYdzS5z+2z0lfxYXaFO9WrsSEythvOdasNK2mjE6iJyZjj/6FT6hFto/cMjxMYErk5qzvzE/Akq/bfnEsTG1uVh9an0yUenDOevdMbjUeXHXGu+jXL72OXoaOhre//7bGBYeOK1ajKUzQDbWhR0p+31ftAXvg9602Vl/XvVvQak9qkMk2q5dDseE+d2mpeaY83Lzdbd5iXmIsGy3GJdFn/W5M7ZvdISqam56EjaWXHRR29HxE5270g7VNwwd/3Vb9H1Se+bubPCEmpIzVMtrVzWxVg5uNiyxDIodJyNlQAA/TwFZR6LM3N1hrbAI7BouYOaaJr+h27jCa3+QS+Gns0NpWO9yn+TFAYAuPK/tQtUzcAUMQF/mRWNtb+ji0cFpRsUve6VmDTYUnfwoKEi9ZAhxwGQo67fMOGLG0NaAybUOCYpoWWRg4gIpJAQD4yZjjwU5KMACVUoIw1N+yvwwwJQEOYGIBUWggTeOIQcPGFDCm98CIx5HXkE4jsU4E0oymj87+WIT15JfHxjKIElfaFo5smZfnn0m7/hD0VxXO9x/sFrTNLQ9uniFybwEFvWox9FHDmeK32S86GUmRaeE4y0QWTZd50reqXWzHXz6A0DRYBF0C4IkTGbOGe0eMz8/DfwDgqFK/rK8v+AreL4hAEt+gbwZZka9V3K9NWRN0IIRy1z2KwifEIIipGbEZbieQkYokXokFns0eEw19TSTm+rd9qGmzhAP6YURyhhhCcCEYlE3HC/8gcfPsuTv3lhHCNOd3KKIuBb704LB31dVSzPis9vx4KmxAm3djYZvNkAAAA=') format('woff2'),
  url('{{- $fontDir -}}/iconfont.woff?t=1591245391370') format('woff'),
  url('{{- $fontDir -}}/iconfont.ttf?t=1591245391370') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('{{- $fontDir -}}/iconfont.svg?t=1591245391370#iconfont') format('svg'); /* iOS 4.1- */
}

I understand the comma-list as "dear browser, pick the first that works" -- but why is the IE9 one separate? Doesn't this create a conflict?

Anyway, neither creating a single src attribute nor simplifying all the way to

@font-face {font-family: "iconfont";
  src:  url('{{- $fontDir -}}/iconfont.ttf?t=1591245391370') format('truetype');
}

makes it work for me (even though iconfont.ttf resolves with 200). :/ :thinking:

Out of curiosity, what did you select here (fontello.com)?

image

cntrump commented 4 years ago

Ah, I see. ✔️

Anyway, doesn't seem to work. Once thing I note:

@font-face {font-family: "iconfont";
  src: url('{{- $fontDir -}}/iconfont.eot?t=1591245391370'); /* IE9 */
  src: url('{{- $fontDir -}}/iconfont.eot?t=1591245391370#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVIAAsAAAAAClgAAAT6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDbAqHAIVpATYCJAMgCxIABCAFhG0HchvlCCOSD06S7B+JsbHyw8yHSpV4ty2SETnY2DYZqc7kQ3jWv8lMsMkaanoCunftt7oHsvvp4sR8AEmAADi/b87aHqA7YUadC8raI49+4e9ykjeZ0tGl6U0KhQJWJ3UtIFEstVlv1iyAEQxFS/1SKnfAfwB8lH+It7rMs4EAkBGJdJD6z/Z+SGDQVxEAZFacOh5SwgNWwSaQ7ELBniyaPAUeEvcw9wGAJ73fJ98gl0gAB55C39g9pWESqu/HfHmGmnSTUQ4F7XAhAOx+AAWQDoAB5KHCyDo0yKWDQpZvx6AC8IQEDsL9GE3WZmlLtbtfntF1kgozu/UIgadB944A4qCSHBh4CH88AWhxB+Ykl4ij1FoERECTCVBAm0mAANosAhygLSXAAO0uAR748owVB0yXlnsDCASgQ2YRZr6NGOs5CJB9fDLqBerNdHOYfYVfFw57acuZt9NGWgdCR+x96/TmkKkvmUKG73nz3Lbk5pHWrWffSF5pvzfuEafqcBmdjutEEW4mZxrOOsm2LIfD4HR1fezoIR2DQ8Vvtw21P1/zGv2Oy4YdLxLV7gw6eNF/766AExfwqiPJeiio3ffZ5Ep7wZn3gsPw/qMtLpf/Ebv/Hgfs9v7nD6Df9HKS66rRqc2eMHPRhJXLqGG55869RBzYl+S1Yw8E026V92RjFcjwgLtlGhl1LpSJQmUoBoApYLzX7J3OfKeamrzfnvHcG7K33WFwKK67xhMuY9aKcjXAiA3zxt4r0ebbgpg+9kjyEXsCC7LN16BYYr57JZX/BErWqbiaMydWVrdlNWX0uW1Kr82rJ9M6A6r//LbVa9Q8tHNv+1zIHlngdqhn4o15awXPxuI1v/z4cKBfo8e94//QL146eM0D0XThZRYdzS5z+2z0lfxYXaFO9WrsSEythvOdasNK2mjE6iJyZjj/6FT6hFto/cMjxMYErk5qzvzE/Akq/bfnEsTG1uVh9an0yUenDOevdMbjUeXHXGu+jXL72OXoaOhre//7bGBYeOK1ajKUzQDbWhR0p+31ftAXvg9602Vl/XvVvQak9qkMk2q5dDseE+d2mpeaY83Lzdbd5iXmIsGy3GJdFn/W5M7ZvdISqam56EjaWXHRR29HxE5270g7VNwwd/3Vb9H1Se+bubPCEmpIzVMtrVzWxVg5uNiyxDIodJyNlQAA/TwFZR6LM3N1hrbAI7BouYOaaJr+h27jCa3+QS+Gns0NpWO9yn+TFAYAuPK/tQtUzcAUMQF/mRWNtb+ji0cFpRsUve6VmDTYUnfwoKEi9ZAhxwGQo67fMOGLG0NaAybUOCYpoWWRg4gIpJAQD4yZjjwU5KMACVUoIw1N+yvwwwJQEOYGIBUWggTeOIQcPGFDCm98CIx5HXkE4jsU4E0oymj87+WIT15JfHxjKIElfaFo5smZfnn0m7/hD0VxXO9x/sFrTNLQ9uniFybwEFvWox9FHDmeK32S86GUmRaeE4y0QWTZd50reqXWzHXz6A0DRYBF0C4IkTGbOGe0eMz8/DfwDgqFK/rK8v+AreL4hAEt+gbwZZka9V3K9NWRN0IIRy1z2KwifEIIipGbEZbieQkYokXokFns0eEw19TSTm+rd9qGmzhAP6YURyhhhCcCEYlE3HC/8gcfPsuTv3lhHCNOd3KKIuBb704LB31dVSzPis9vx4KmxAm3djYZvNkAAAA=') format('woff2'),
  url('{{- $fontDir -}}/iconfont.woff?t=1591245391370') format('woff'),
  url('{{- $fontDir -}}/iconfont.ttf?t=1591245391370') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('{{- $fontDir -}}/iconfont.svg?t=1591245391370#iconfont') format('svg'); /* iOS 4.1- */
}

I understand the comma-list as "dear browser, pick the first that works" -- but why is the IE9 one separate? Doesn't this create a conflict?

Anyway, neither creating a single src attribute nor simplifying all the way to

@font-face {font-family: "iconfont";
  src:  url('{{- $fontDir -}}/iconfont.ttf?t=1591245391370') format('truetype');
}

makes it work for me (even though iconfont.ttf resolves with 200). :/ 🤔

Out of curiosity, what did you select here (fontello.com)?

image

Now I regen iconfont with fontello and use default configuration(Private User Area). Does it work?

reitzig commented 4 years ago

No change. :(

I don't know what's going on. I don't get any errors in the console; the symbols just don't show up. Can you reproduce this at all?

cntrump commented 4 years ago

Try another browser or update firefox ? I tested in virtual machine(Ubuntu desktop 18.04.4 + Firefox 76) it works well...

reitzig commented 4 years ago

Same actually, Ubuntu 18.04 and FF 76. :shrug:

Heh, I didn't see this before, but now I've got this:

image

The new iconfont and my admonition-font interfere! :sweat_smile: Should have known that was a possibility -- so it seems I need to fly my own font completely. Maybe that will work. Or do you plan on tackling #82 anytime soon?

But at least the font itself works. The paging icons are still broken, though. :thinking:

cntrump commented 4 years ago

Same actually, Ubuntu 18.04 and FF 76. 🤷

Heh, I didn't see this before, but now I've got this:

image

The new iconfont and my admonition-font interfere! 😅 Should have known that was a possibility -- so it seems I need to fly my own font completely. Maybe that will work. Or do you plan on tackling #82 anytime soon?

But at least the font itself works. The paging icons are still broken, though. 🤔

Updated iconfont codes: 0xFE00 - 0xFE06

cntrump commented 4 years ago

regenerate iconfont again, tested ok now

reitzig commented 3 years ago

Sorry for the long silence, I just got back to this.

Unfortunately, the icon font(s) still don't work for me, even on your demo page:

image

I'm ready to assume it's something with my setup, but I don't understand what. :thinking: I can reproduce with FF 87 on Ubuntu as well as the most recent FF and Chrome on Android 10.

On my page, I get this in the web console:

downloadable font: no supported format found (font-family: "fontello" style:normal weight:400 stretch:100 src index:2) source: (end of source list)

This goes away after migrating to SVG admonition icons, though. Huh. (Navigation icons still don't work, unfortunately.)