--- id: browser title: Browser --- > KaTeX supports all major browsers, including Chrome, Safari, Firefox, Opera, and Edge. ## Starter template ```html ... ``` ## Loading as Global If you include the `katex.js` directly, the `katex` object will be available as a global variable. ```html ``` KaTeX also provides minified versions: ```html ``` The examples above load the script [deferred using the `defer` attribute](https://developer.mozilla.org/en/HTML/Element/script#Attributes) to speed up page rendering. The `katex` object will be available after [`DOMContentLoaded` event is fired on the `document`](https://developer.mozilla.org/ko/docs/Web/Reference/Events/DOMContentLoaded). If you do not use `defer`, `katex` object will be available after the corresponding `script` tag. If KaTeX is not used immediately or not critical, it is possible to load KaTeX asynchronously. Add [`async` attribute](https://developer.mozilla.org/en/HTML/Element/script#Attributes) to `script` and use [`rel="preload"` and `onload` attribute](https://github.com/filamentgroup/loadCSS) on `link`. By default, KaTeX fonts use `font-display: block` to prevent [Flash of Unstyled Text (FOUT)](https://css-tricks.com/fout-foit-foft/). If you would rather use `font-display: swap` to prevent [Flash of Invisible Text (FOIT)](https://css-tricks.com/fout-foit-foft/), include `katex-swap.css` or `katex-swap.min.css`: ```html ``` To prevent both FOUT and FOIT, you can prefetch KaTeX fonts. Use [Font Loading API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API) or [Web Font Loader](https://github.com/typekit/webfontloader): ```html ``` You can also use [`rel="preload"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content). Add `` to `head`. Note that [only few browsers support it](https://caniuse.com/#feat=link-rel-preload) and they all support WOFF2 so preloading WOFF2 fonts is enough. See [Google Web Fundamentals - Web Font Optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization) for more detail. ## Module Loaders ### AMD ```html ``` ### ECMAScript module ```html ``` > Use [`nomodule` attribute](https://developer.mozilla.org/en/HTML/Element/script#Attributes) to provide a fallback for older browsers that do not support ES modules. ## Download & Host Things Yourself Download a [KaTeX release](https://github.com/KaTeX/KaTeX/releases), copy `katex.js`, `katex.css` (or `katex.min.js` and `katex.min.css` to use minified versions), and the `fonts` directory, and include or import it like above. You can also build from source. See [Building from Source](node.md#building-from-source) for more details. ## Bundler [Use Node.js package managers to install KaTeX and import it](node.md) in your project. Then bundle using bundlers like [webpack](https://webpack.js.org/) or [rollup.js](https://rollupjs.org/). Note that you have to bundle the stylesheet (`katex.css`) or include it manually.