diff --git a/README.md b/README.md index 7f7a06d..0af9d77 100644 --- a/README.md +++ b/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. + Feel free to contribute different fonts. --- diff --git a/src/fonts/README.md b/src/fonts/README.md index 7403295..fc6abb9 100644 --- a/src/fonts/README.md +++ 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
@@ -16,12 +43,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)