There are two ways to add fonts to your blog:
Google Fonts is the most popular service for web fonts. However, it has known privacy issues and is not compliant with privacy laws like GDPR. Therefore, we proxy Google Fonts to provide you with a better privacy and speed. All scripts or stylesheets will be served directly from your blog's domain.
https://[your-domain]/fonts/css/{family}
- CSS Proxyhttps://[your-domain]/fonts/file/{file_name}
- Font file proxyDue to some limitations in Google TOS, under the hood, we proxy Bunny Fonts, which is a privacy-focused alternative to Google Fonts. Both services provide the same fonts with the same API. Variable fonts are not supported.
First, head over to Bunny Fonts (or Google Fonts) and select the fonts and variants you need. You will see a CSS code to load the fonts as below.
@import url(https://fonts.bunny.net/css?family=mulish:400,700);
From this, copy only the family part. In this case, it is mulish:400,700
.
Then, paste it in Console → Theme → config.yaml → THEME_FONTS.
When you add this to the config.yaml, the fonts will be loaded in the <head>
tag of your blog automatically. Then, you can use that font in your blog.
Note: If you do not see the Theme Fonts option in the UI, switch to YAML mode (top right corner) and add
THEME_FONTS
option afterTHEME_VERSION
.THEME_NAME: hello THEME_VERSION: 1.0.0 THEME_FONTS: "mulish:400,700"
This steps depends on the theme you use. All official themes support font customization via config.yaml
. Some themes have multiple font options for different parts of the blog (ex: text vs headings).
Copy the font family value from the Embed CSS section of Bunny Fonts.
Paste it in the relevant option in config.yaml
in your theme.
If your theme does not support font customization, you can use CSS to change the font.
If you need to add a custom font not available in Google Fonts, follow these steps:
Your custom CSS should look like this:
@font-face {
font-family: 'My Font';
src: url('/assets/my-font.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'My Font', sans-serif;
}