Appearance

Default Mode

Light mode is used as default mode. To change it to Dark or System, you can follow these steps:

1. Go to Theme Designer.
2. Click on Advanced tab.
3. From the dropdown list, select Style: Appearance.
4. Change the length of Default Mode to 1px, 2px or 3px in order to use Light, Dark or System as default mode.

Fonts

Fonts are loaded dynamically by theme based on few conditions in order to improve PageSpeed score.

You can either use a web-safe font (built into most browsers) or import a custom font from sources like Google Fonts or other CDNs.

Using link tag

1. Go to Google Fonts, select a font, and copy the attribute href of provided <link> tag having attribute rel="stylesheet" as shown below.

   <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=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">

2. Escape the copied url by replacing & to &, < to <, > to >, ' to ' and " to " if there exists any.
   For example the above url contains &. Therefore, we need to escape by replacing it to & as shown.
   https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap

   https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap

3. Through Blogger HTML Editor, find the following code snippet and put the escaped url in one of the marked parts, whichever first is empty.
   <Variable name="font.link1" description="Font Link 1" type="string" default="" value=""/>
   [!] Font Link 1
   [!] @type {String}
   [!] Warning: Don't add invalid font css url
   
   <Variable name="font.link2" description="Font Link 2" type="string" default="" value=""/>
   [!] Font Link 2
   [!] @type {String}
   [!] Warning: Don't add invalid font css url
   
   <Variable name="font.link3" description="Font Link 3" type="string" default="" value=""/>
   [!] Font Link 3
   [!] @type {String}
   [!] Warning: Don't add invalid font css url
   
   <Variable name="font.link4" description="Font Link 4" type="string" default="" value=""/>
   [!] Font Link 4
   [!] @type {String}
   [!] Warning: Don't add invalid font css url
   
   <Variable name="font.link5" description="Font Link 5" type="string" default="" value=""/>
   [!] Font Link 5
   [!] @type {String}
   [!] Warning: Don't add invalid font css url

   <Variable name="font.link1" description="Font Link 1" type="string" default="" value="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&amp;display=swap"/>
   [!] Font Link 1
   [!] @type {String}
   [!] Warning: Don't add invalid font css url
   
   <Variable name="font.link2" description="Font Link 2" type="string" default="" value=""/>
   [!] Font Link 2
   [!] @type {String}
   [!] Warning: Don't add invalid font css url
   
   <Variable name="font.link3" description="Font Link 3" type="string" default="" value=""/>
   [!] Font Link 3
   [!] @type {String}
   [!] Warning: Don't add invalid font css url
   
   <Variable name="font.link4" description="Font Link 4" type="string" default="" value=""/>
   [!] Font Link 4
   [!] @type {String}
   [!] Warning: Don't add invalid font css url
   
   <Variable name="font.link5" description="Font Link 5" type="string" default="" value=""/>
   [!] Font Link 5
   [!] @type {String}
   [!] Warning: Don't add invalid font css url

If you don't want to dynamically load your fonts, skip above steps and put all <link> tags provided by Google Fonts below to following line of code through Blogger HTML Editor. Note that you still need to escape the value of href attribute.

<b:comment><!--[ </head> | <!> Add custom codes (below) ]--></b:comment>

Using CSS

Font name

If you changed the default font sources, you may need to provide your font family name in order to be used by the document. To do so, you can follow these steps:

1. Go to Blogger HTML Editor.
2. Find the following code snippet and replace the existing font names with your custom font names.
   <Variable name="font.head" description="Heading font name" type="string" default="" value="Google Sans Text"/>
   [!] Heading font name
   [!] @type {String}
   
   <Variable name="font.body" description="Body font name" type="string" default="" value="Google Sans Text"/>
   [!] Body font name
   [!] @type {String}
   
   <Variable name="font.bodyAlt" description="Body alternative font name" type="string" default="" value="Google Sans Text"/>
   [!] Body alternative font name
   [!] @type {String}
   
   <Variable name="font.code" description="Code Font Name" type="string" default="" value="Google Sans Mono"/>
   [!] Code font name
   [!] @type {String}

   <Variable name="font.head" description="Heading font name" type="string" default="" value="Plus Jakarta Sans"/>
   [!] Heading font name
   [!] @type {String}
   
   <Variable name="font.body" description="Body font name" type="string" default="" value="Plus Jakarta Sans"/>
   [!] Body font name
   [!] @type {String}
   
   <Variable name="font.bodyAlt" description="Body alternative font name" type="string" default="" value="Plus Jakarta Sans"/>
   [!] Body alternative font name
   [!] @type {String}
   
   <Variable name="font.code" description="Code Font Name" type="string" default="" value="Google Sans Mono"/>
   [!] Code font name
   [!] @type {String}