Skip to content

Commit 46fcb8e

Browse files
junzyxjunzyx
committed
docs update
1 parent 9bea1f1 commit 46fcb8e

File tree

3 files changed

+149
-14
lines changed

3 files changed

+149
-14
lines changed

Diff for: ‎apps/docs/usage/custom-fonts.mdx

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
---
2+
title: "Custom Fonts"
3+
description: "Learn how to use custom fonts in your document templates, including Google Fonts and local fonts"
4+
icon: "font"
5+
---
6+
7+
# Custom Fonts
8+
9+
You can enhance your document templates with custom fonts, either from Google Fonts or by using local font files. This guide covers both approaches.
10+
11+
## Using Google Fonts
12+
13+
To use Google Fonts in your documents, import them in your document's `<Head>` component:
14+
15+
```tsx
16+
import { Document, Head } from "@htmldocs/react"
17+
18+
function MyDocument() {
19+
return (
20+
<Document>
21+
<Head>
22+
<link
23+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
24+
rel="stylesheet"
25+
/>
26+
</Head>
27+
<div style={{ fontFamily: 'Inter, sans-serif' }}>
28+
Text using Google Font (Inter)
29+
</div>
30+
</Document>
31+
)
32+
}
33+
```
34+
35+
## Using Local Fonts
36+
37+
For local fonts, place your font files in the `/documents/static` directory and use `@font-face` to define them:
38+
39+
<Note>
40+
All font 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.
41+
</Note>
42+
43+
```tsx
44+
import { Document, Head } from "@htmldocs/react"
45+
46+
function MyDocument() {
47+
return (
48+
<Document>
49+
<Head>
50+
<style>
51+
{`
52+
@font-face {
53+
font-family: 'CustomFont';
54+
src: url('/static/fonts/CustomFont.woff2') format('woff2'),
55+
url('/static/fonts/CustomFont.woff') format('woff');
56+
font-weight: normal;
57+
font-style: normal;
58+
font-display: swap;
59+
}
60+
`}
61+
</style>
62+
</Head>
63+
<div style={{ fontFamily: 'CustomFont' }}>
64+
Text using local custom font
65+
</div>
66+
</Document>
67+
)
68+
}
69+
```
70+
71+
## Best Practices
72+
73+
1. **Font Loading Performance**
74+
- For Google Fonts, use the `&display=swap` parameter to prevent font rendering blocking
75+
- For local fonts, use `font-display: swap` in your `@font-face` declaration
76+
- Include only the font weights you need to minimize loading time
77+
78+
2. **File Formats**
79+
- For maximum browser compatibility, provide both WOFF2 and WOFF formats
80+
- WOFF2 offers better compression and should be listed first in the `src` property
81+
82+
3. **Font Fallbacks**
83+
- Always include fallback fonts in your `fontFamily` style
84+
- Example: `fontFamily: 'CustomFont, system-ui, sans-serif'`
85+
86+
## Example with Multiple Font Weights
87+
88+
Here's an example using a custom font with multiple weights:
89+
90+
```tsx
91+
import { Document, Head } from "@htmldocs/react"
92+
93+
function MyDocument() {
94+
return (
95+
<Document>
96+
<Head>
97+
<style>
98+
{`
99+
@font-face {
100+
font-family: 'CustomFont';
101+
src: url('/static/fonts/CustomFont-Regular.woff2') format('woff2');
102+
font-weight: 400;
103+
font-style: normal;
104+
font-display: swap;
105+
}
106+
107+
@font-face {
108+
font-family: 'CustomFont';
109+
src: url('/static/fonts/CustomFont-Bold.woff2') format('woff2');
110+
font-weight: 700;
111+
font-style: normal;
112+
font-display: swap;
113+
}
114+
`}
115+
</style>
116+
</Head>
117+
<div>
118+
<p style={{ fontFamily: 'CustomFont', fontWeight: 400 }}>
119+
Regular text using custom font
120+
</p>
121+
<p style={{ fontFamily: 'CustomFont', fontWeight: 700 }}>
122+
Bold text using custom font
123+
</p>
124+
</div>
125+
</Document>
126+
)
127+
}
128+
```

Diff for: ‎apps/docs/usage/publishing-to-the-cloud.mdx

+2-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,8 @@ curl -X POST https://api.htmldocs.com/api/documents/{documentId} \
7171
-H "Authorization: Bearer YOUR_API_KEY" \
7272
-H "Content-Type: application/json" \
7373
-d '{
74-
"variables": {
74+
"format": "json",
75+
"props": {
7576
"customerName": "Acme Corp",
7677
"items": [
7778
{

Diff for: ‎apps/docs/usage/static-content.mdx

+19-13
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,12 @@ description: "Learn how to use static content and custom fonts in your document
44
icon: "image"
55
---
66

7+
<Note>
8+
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.
9+
</Note>
10+
711
## Client-Side Usage
8-
Inside HTML/React components, static files are served directly from the `/static` directory. Access them using the absolute path:
12+
Inside HTML/React components, static files are served directly from the `/documents/static` directory. Access them using the absolute path:
913

1014
```tsx
1115
// Access static content on the client-side
@@ -35,22 +39,24 @@ const content = fs.readFileSync(
3539
Place your font files anywhere in the `/static` directory and load them using `@font-face`:
3640

3741
```tsx
38-
import { Document } from "@htmldocs/react"
42+
import { Document, Head } from "@htmldocs/react"
3943

4044
function MyDocument() {
4145
return (
4246
<Document>
43-
<style>
44-
{`
45-
@font-face {
46-
font-family: 'CustomFont';
47-
src: url('/static/fonts/CustomFont.woff2') format('woff2'),
48-
url('/static/fonts/CustomFont.woff') format('woff');
49-
font-weight: normal;
50-
font-style: normal;
51-
}
52-
`}
53-
</style>
47+
<Head>
48+
<style>
49+
{`
50+
@font-face {
51+
font-family: 'CustomFont';
52+
src: url('/static/fonts/CustomFont.woff2') format('woff2'),
53+
url('/static/fonts/CustomFont.woff') format('woff');
54+
font-weight: normal;
55+
font-style: normal;
56+
}
57+
`}
58+
</style>
59+
</Head>
5460
<div style={{ fontFamily: 'CustomFont' }}>
5561
Text using custom font
5662
</div>

0 commit comments

Comments
 (0)