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:
- Go to Theme Designer.
- Click on Advanced tab.
- From the dropdown list, select Style: Appearance.
- 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
-
Go to Google Fonts, select a font, and copy the attribute
hrefof provided<link>tag having attributerel="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"> -
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=swaphttps://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap -
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&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 &, < to <, > to >, ' to ' and " to ").
<Variable name="font.css" description="Font CSS" type="string" default="" value="@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:400;font-display:swap;src:local('Google Sans Text'),local('Google-Sans-Text'),url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUu9-KzpRiLCAt4Unrc-xIKmCU5qEp2iw.woff2) format('woff2')} @font-face{font-family:'Google Sans Text';font-style:normal;font-weight:700;font-display:swap;src:local('Google Sans Text'),local('Google-Sans-Text'),url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oPFTnmhjtg.woff2) format('woff2')} @font-face{font-family:'Google Sans Mono';font-style:normal;font-weight:400;font-display:swap;src:local('Google Sans Mono'),local('Google-Sans-Mono'),url(https://fonts.gstatic.com/s/googlesansmono/v4/P5sUzYWFYtnZ_Cg-t0Uq_rfivrdYH4RE8-pZ5gQ1abT53wVQGrk.woff2) format('woff2')}"/>
[!] Font CSS
[!] @type {String}
[!] Warning: The font CSS must be in single line and string must be escapedFont 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:
- Go to Blogger HTML Editor.
-
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}
