Bloggerテーマでフォントをカスタマイズできるようにする

まぁ英文でブログを書くのでなければ、日本語フォントに対応していないものが多いので、恩恵はあまり受けられませんが

今回もサンプルは「黎明鬼」テーマ

Code

   <Group description="Blog Title" selector="h1.title">
     <Variable name="header.font" description="Font" type="font"
         default="normal normal Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
   </Group>

   <Group description="Post Title" selector="h1.post-title">
     <Variable name="post.title.font" description="Font" type="font"
         default="normal normal Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
   </Group>

ベースコードはSimpleから
(セレクターは「黎明鬼」テーマに合わせてあります)

CSS

フォントのカスタマイズで問題なのが、サイズのデフォルト値が(カスタマイズ後の値も) px か 100% でしか指定できない感じ

h1.title {
  text-align: center;
  font: $(header.font);
}

h1.post-title {
  font-size: calc(1.375rem + 1.5vw) !important;
  font: $(post.title.font);
}

.h1,h1{font-size:calc(1.375rem + 1.5vw) !important}

<b:if cond='data:blog.pageType in {&quot;index&quot;,&quot;archive&quot;}'>
<style>
h1.post-title{font-size:calc(1.3rem + .6vw) !important}
</style>
</b:if>

関連する箇所は important 宣言をしました

「黎明鬼」テーマは出したときからですが、見出しはレスポンシブでページタイプでも変化します

現在投稿タイトルのフォントを変えてあります > https://reimei-ki.blogspot.com/