docs: clarify custom font usage

README.md

@@ -162,6 +162,36 @@ Use `?font=FONT_NAME` parameter as shown below
 ![Quote](https://github-readme-quotes-bay.vercel.app/quote?font=Redressed)
 ```
 
+The font parameter selects one of the fonts bundled with this project. Use the
+font key as it appears in the list below. Font keys are case-sensitive, and you
+can combine them with the other quote parameters by adding `&font=FONT_NAME`.
+
+```md
+![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark&layout=socrates&font=gabrielle)
+```
+
+The quote endpoint does not load arbitrary remote font URLs from the query
+string. To use a custom font, add it to the bundled font list first, then pass
+its registered key with `font`. For example, a contributor can start from a
+Google Fonts CSS URL such as:
+
+```txt
+https://fonts.googleapis.com/css2?family=Redressed
+```
+
+Convert the font file referenced by that CSS into embedded base64 font data,
+add it to [`src/fonts/fonts.js`](./src/fonts/fonts.js), and document the new
+key in [`src/fonts/README.md`](./src/fonts/README.md). After it is registered,
+users can preview it with a normal quote URL:
+
+```md
+![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark&font=Redressed)
+```
+
+#### Available Fonts
+
+default, gabrielle, Redressed, Calligraffitti, Architect, PixelifySans
+
 #### Font 1 (Default)
 
 ![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark)
@@ -174,6 +204,12 @@ Use `?font=FONT_NAME` parameter as shown below
 
 You can explore different fonts [here](./src/fonts/README.md).
 
+To contribute another font, use its source CSS URL to find the font file,
+convert that file into embedded base64 font data, add the font-face data to
+[`src/fonts/fonts.js`](./src/fonts/fonts.js), document the new parameter value in
+[`src/fonts/README.md`](./src/fonts/README.md), and include a preview link in
+this section.
+
 <b>Feel free to contribute different fonts.</b>
 
 ---

src/fonts/README.md

@@ -2,12 +2,39 @@
 
 You can add fonts to your templates without any manual customization.
 
-Use `?font=FONT_NAME` parameter like so :-
+Use the `?font=FONT_NAME` parameter with one of the bundled font names:
+
+- `default`
+- `gabrielle`
+- `Redressed`
+- `Calligraffitti`
+- `Architect`
+- `PixelifySans`
+
+For example:
 
 ```md
 ![Quote](https://github-readme-quotes-bay.vercel.app/quote?font=Redressed)
 ```
 
+When combining a font with other options, append it with `&font=FONT_NAME`:
+
+```md
+![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark&layout=socrates&font=gabrielle)
+```
+
+The endpoint accepts registered font keys, not arbitrary remote font URLs in
+the query string. To add another font, start from a source CSS URL such as a
+Google Fonts URL:
+
+```txt
+https://fonts.googleapis.com/css2?family=Redressed
+```
+
+Use that CSS to find the font file, convert the font file to embedded base64
+font data, register it in [`fonts.js`](./fonts.js), use a stable parameter key,
+and add a preview example below so README users can copy the correct value.
+
 ### Fonts
 
 - Default <br>
@@ -16,12 +43,20 @@ Use `?font=FONT_NAME` parameter like so :-
 
 - Gabrielle <br>
 
-![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark&font=Gabrielle)
+![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark&font=gabrielle)
 
 - Redressed <br>
 
 ![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark&font=Redressed)
 
+- Calligraffitti <br>
+
+![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark&font=Calligraffitti)
+
 - Architect <br>
 
-![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark&font=Architect)
+![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark&font=Architect)
+
+- PixelifySans <br>
+
+![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark&font=PixelifySans)