Adding new font styles

You can easily contribute new font styles into Cardie to allow for more customization.

First, navigate to the font_styles array in font_styles.js

Next, go to Google Fonts and find the font faces you'd like to use. Press Get Embed Code, and ensure you're in the section for the code for a <link> element. Take the url out of the third line in the code, for example in this provided code:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

You would use the URL https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap for the link to use in the next step.

Now, add a new item to the array following this pattern:

var font_styles =  [
    {"name": "Name of the Font Style", 
        "header": {"name": "Name of the font face for the header", "url": "Url to the Google Font font face"}, 
        "text": {"name": "Name of the font face for body text", "url": "Url to the Google Font font face"}
    },
];

If you're using a font that should not be downloaded and instead is already available on the system or browser, change the url parameter to instead be the same as the name parameter.

Now your new font style will appear in the editor's font selector and be available to add to cards. Open a pull request with your changes and they'll be merged in the next update. Thanks for contributing a new font style!