From 51b27e443389a62f565fb587e5a3ada64f291587 Mon Sep 17 00:00:00 2001 From: nic <139033898+dicnunz@users.noreply.github.com> Date: Wed, 20 May 2026 15:15:57 -0400 Subject: [PATCH 1/2] docs: clarify custom font usage --- README.md | 17 +++++++++++++++++ src/fonts/README.md | 33 ++++++++++++++++++++++++++++++--- 2 files changed, 47 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 7f7a06d..b94eb31 100644 --- a/README.md +++ b/README.md @@ -162,6 +162,18 @@ 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) +``` + +#### Available Fonts + +default, gabrielle, Redressed, Calligraffitti, Architect, PixelifySans + #### Font 1 (Default) ![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark) @@ -174,6 +186,11 @@ Use `?font=FONT_NAME` parameter as shown below You can explore different fonts [here](./src/fonts/README.md). +To contribute another font, add its 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. + Feel free to contribute different fonts. --- diff --git a/src/fonts/README.md b/src/fonts/README.md index 7403295..c580861 100644 --- a/src/fonts/README.md +++ b/src/fonts/README.md @@ -2,12 +2,31 @@ 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) +``` + +To add another font, 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
@@ -16,12 +35,20 @@ Use `?font=FONT_NAME` parameter like so :- - Gabrielle
-![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
![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark&font=Redressed) +- Calligraffitti
+ +![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark&font=Calligraffitti) + - Architect
-![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark&font=Architect) \ No newline at end of file +![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark&font=Architect) + +- PixelifySans
+ +![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark&font=PixelifySans) From d6f6fdce75ba14c76748db5caef0d5e0c7d664e2 Mon Sep 17 00:00:00 2001 From: nic <139033898+dicnunz@users.noreply.github.com> Date: Fri, 22 May 2026 00:42:56 -0400 Subject: [PATCH 2/2] docs: clarify custom font URL workflow --- README.md | 21 ++++++++++++++++++++- src/fonts/README.md | 14 +++++++++++--- 2 files changed, 31 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index b94eb31..0af9d77 100644 --- a/README.md +++ b/README.md @@ -170,6 +170,24 @@ can combine them with the other quote parameters by adding `&font=FONT_NAME`. ![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 @@ -186,7 +204,8 @@ default, gabrielle, Redressed, Calligraffitti, Architect, PixelifySans You can explore different fonts [here](./src/fonts/README.md). -To contribute another font, add its font-face data to +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. diff --git a/src/fonts/README.md b/src/fonts/README.md index c580861..fc6abb9 100644 --- a/src/fonts/README.md +++ b/src/fonts/README.md @@ -23,9 +23,17 @@ When combining a font with other options, append it with `&font=FONT_NAME`: ![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark&layout=socrates&font=gabrielle) ``` -To add another font, 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. +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