mathiasbynens / mathiasbynens/math-tex

Fonts don’t show up properly

Open
#2 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug upstream
Dominant language
HTML
Stars
27
Forks
1
PR merge metrics
No merged PRs in 30d

Description

Maybe I'm missing something, but at https://mathiasbynens.github.io/math-tex/dist/example.html it looks like the right fonts aren't being loaded, which causes the rendered math to look significantly worse. This happens because the katex.min.css stylesheet is inlined:

```
@font-face{font-family:KaTeX_Main;src:url(fonts/KaTeX_Main-Regular.eot);src:url(fonts/KaTeX_Main-Regular.eot?#iefix) format('embedded-opentype'),url(fonts/KaTeX_Main-Regular.woff) format('woff'),url(fonts/KaTeX_Main-Regular.ttf) format('truetype');font-weight:400;font-style:normal}
```

but the fonts aren't available at that path relative to the built math-tex.html (they live in bower_components). Not sure the best way to fix this as I'm not familiar with how web components are usually distributed.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by inspecting the built math-tex.html, the inlined katex.min.css, and the font files under bower_components. Reproduce the font-loading failure at the linked example page, then determine how the distributed build should reference or include those fonts. Done means the example loads the intended KaTeX fonts and rendered math no longer falls back to the incorrect fonts.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.