Appearance and Customization

Help us improve this post! English is not my first language, so if you find any mistakes or think something can be explained better, feel free to contact us. Your suggestions are always welcome!

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.

Custom 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 &amp;, < to &lt;, > to &gt;, ' to &#39; and " to &quot; if there exists any.
    For example the above url contains &. Therefore, we need to escape by replacing it to &amp; 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&amp;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

If you can't link fonts using external sources and you have CSS which imports font families, you can replace the marked part with your single line escaped font css, i.e. your css must be in a single line and escaped (replace & to &amp;, < to &lt;, > to &gt;, ' to &#39; and " to &quot;).

<Variable name="font.css" description="Font CSS" type="string" default="" value="@font-face{font-family:&#39;Google Sans Text&#39;;font-style:normal;font-weight:400;font-display:swap;src:local(&#39;Google Sans Text&#39;),local(&#39;Google-Sans-Text&#39;),url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUu9-KzpRiLCAt4Unrc-xIKmCU5qEp2iw.woff2) format(&#39;woff2&#39;)} @font-face{font-family:&#39;Google Sans Text&#39;;font-style:normal;font-weight:700;font-display:swap;src:local(&#39;Google Sans Text&#39;),local(&#39;Google-Sans-Text&#39;),url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oPFTnmhjtg.woff2) format(&#39;woff2&#39;)} @font-face{font-family:&#39;Google Sans Mono&#39;;font-style:normal;font-weight:400;font-display:swap;src:local(&#39;Google Sans Mono&#39;),local(&#39;Google-Sans-Mono&#39;),url(https://fonts.gstatic.com/s/googlesansmono/v4/P5sUzYWFYtnZ_Cg-t0Uq_rfivrdYH4RE8-pZ5gQ1abT53wVQGrk.woff2) format(&#39;woff2&#39;)}"/>
[!] Font CSS
[!] @type {String}
[!] Warning: The font CSS must be in single line and string must be escaped

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}

About the author

Deø Kumar
Lost in the echoes of another realm.

Post a Comment

New comments are not allowed.