> ## Documentation Index
> Fetch the complete documentation index at: https://docs.htmldocs.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Static Content
> Learn how to use static content and custom fonts in your document templates
All static files must be placed in the `/documents/static` directory of your project. This is the required location for serving static assets in your document templates.
## Client-Side Usage
Inside HTML/React components, static files are served directly from the `/documents/static` directory. Access them using the absolute path:
```tsx theme={null}
// Access static content on the client-side
```
## Server-Side Usage
When reading files server-side (like in document templates), use `process.env.DOCUMENTS_STATIC_PATH` to access files in your static directory:
Server-side files only work in local development and are not supported yet using the API.
If you'd like to see this feature, please leave a comment on the #feature-requests channel in Slack.
```tsx theme={null}
import fs from 'node:fs'
import path from 'path'
// Read static content in server-side components
const content = fs.readFileSync(
path.join(process.env.DOCUMENTS_STATIC_PATH ?? '', 'content.md'),
'utf-8'
)
```
## Example: Local Fonts
Place your font files anywhere in the `/static` directory and load them using `@font-face`:
```tsx theme={null}
import { Document, Head } from "@htmldocs/react"
function MyDocument() {
return (
Text using custom font
)
}
```
## Example: Loading Markdown Content
Here's a complete example of loading and rendering markdown content in a document:
```tsx theme={null}
import { Document } from "@htmldocs/react"
import MarkdownIt from 'markdown-it'
import fs from 'node:fs'
import path from "path"
const content = fs.readFileSync(
path.join(process.env.DOCUMENTS_STATIC_PATH ?? '', 'content.md'),
'utf-8'
)
const md = new MarkdownIt({ html: true })
function MyDocument() {
const html = md.render(content)
return (
)
}
```