はじめまして。メッセージありがとうございます。
フォントの変更は以下のコードで反映されると思います。（私の環境では大丈夫でした）
これでも上手くいかないようでしたらお手数ですが再度メッセージからお知らせください。
<meta charset="UTF-8"><!-- 文字コードの指定 --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"><!-- リセットCSS --> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Italiana"><!-- GoogleFonts --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css"><!-- Font Awesome --> <style type="text/css" media="screen and (min-width:800px)"> @font-face { font-family: はんなり明朝; src: url('https://cdn.leafscape.be/hannari/hannari_web.woff2') format("woff2"); } /*------------------------------------------------- このフォントはIPAフォントライセンスv1.0の下で提供されています。 http://ipafont.ipa.go.jp/ipa_font_license_v1.html -------------------------------------------------*/ /* 共通設定 */ html { background: transparent; font-size: 62.5%; } body { font-size: 1.3rem; font-family: はんなり明朝, 'Sawarabi Mincho', serif; letter-spacing: 0.2em; line-height: 180%; } a { background: #ededed; color: #000000; text-decoration: none; transition: 0.7s; } a:hover { background: #d7eceb; } h1 { padding: 0.5em 0em; font-family: 'Italiana', serif; font-size: 4rem; text-align: center; } h2 { display: inline-block; padding: 0em 1em; margin: 0.5em 0em; border-bottom: solid 2px #cccccc; font-family: 'Italiana', serif; font-size: 1.3em; } h3 { margin: 0.5em 0em 0.5em 1em; color: #555555; } em { color: #888888; } ol,ul,dl { list-style: none; } input,textarea,select,button { border: solid 1px #cccccc; font-family: inherit; font-size: 100%; } /* 段落設定 */ p { padding: 0em 1em; } section { margin: 2em 0em; } /* メインコンテンツ設定 */ main { display: block; margin: 5rem auto; width: 50%; min-width: 600px; } /* 小説設定 */ .novel { text-align: center; } .novel a { padding: 0em 0.5em; } .novel a:hover { background: #cfcfcf; } .novel ul { padding: 2em 0em; } .novel li { display: flex; align-items: center; padding: 2em 0em; box-sizing: border-box; } .novel li div { padding: 1em; width: 100%; } .novel li i { display: inline-block; padding: 0rem; font-size: 20.0rem; } .novel li h3 { padding: 0.5em 0em; font-family: 'Italiana', serif; font-size: 2.0rem; } .novel h3 span { padding: 0em 1em; color: #000000; font-size: 0.6em; font-weight: normal; } .novel p { color: #444444; text-align: left; } /* ここから背景設定 */ .img_1 { background: url('画像URL') center / 140% #e296de; } .img_2 { background: url('画像URL') center / 120% #6bc9d1; } .img_3 { background: url('画像URL') center / 190% #d1c16b; } .img_4 { background: url('画像URL') center / 240% #6059a8; } .img_5 { background: url('画像URL') #777777; } /* ここまで背景設定 */ /* その他の設定 */ .image { background-clip: text; -webkit-background-clip: text; color: transparent; } .right { text-align: right; } </style> <style type="text/css" media="screen and (max-width:799px)"> @font-face { font-family: はんなり明朝; src: url('https://cdn.leafscape.be/hannari/hannari_web.woff2') format("woff2"); } /*------------------------------------------------- このフォントはIPAフォントライセンスv1.0の下で提供されています。 http://ipafont.ipa.go.jp/ipa_font_license_v1.html -------------------------------------------------*/ /* 共通設定 */ html { background: transparent; font-size: 62.5%; } body { font-size: 1.2rem; font-family: はんなり明朝, 'Sawarabi Mincho', serif; letter-spacing: 0.2em; line-height: 180%; } a { background: #ededed; color: #000000; text-decoration: none; transition: 0.7s; } a:hover { background: #d7eceb; } h1 { padding: 0.5em 0em; font-family: 'Italiana', serif; font-size: 4rem; text-align: center; } h2 { display: inline-block; padding: 0em 1em; margin: 0.5em 0em; border-bottom: solid 2px #cccccc; font-family: 'Italiana', serif; } h3 { margin: 0.5em 0em 0.5em 1em; } em { color: #999999; } ol,ul,dl { list-style: none; } input,textarea,select,button { border: solid 1px #cccccc; font-family: inherit; font-size: 100%; } textarea { padding: 0.2em; width: 90%; } /* 段落設定 */ p { padding: 0em 1em; } section { margin: 2em 0em; } /* メインコンテンツ設定 */ main { display: block; margin: 2rem auto 5rem; width: 90%; max-width: 500px; } /* 小説設定 */ .novel { width: 90%; max-width: 500px; text-align: center; } .novel a { padding: 0em 0.5em; } .novel a:hover { background: #cfcfcf; } .novel ul { padding: 2em 0em; } .novel li { display: flex; align-items: center; padding: 1em; } .novel li i { padding: 0rem; font-size: 8.0rem; } .novel li div { width: 100%; } .novel li h3 { display: block; padding: 0em 0.5em; margin: 0em; font-family: 'Italiana', serif; font-size: 1.2rem; text-align: center; } .novel h3 span { padding: 0em 1em; color: #000000; font-size: 1rem; font-weight: normal; } .novel p { padding: 0.5em 1em; color: #444444; text-align: left; } /* ここから背景設定 */ .img_1 { background: url('画像URL') center / 140% #e296de; } .img_2 { background: url('画像URL') center / 120% #6bc9d1; } .img_3 { background: url('画像URL') center / 190% #d1c16b; } .img_4 { background: url('画像URL') center / 240% #6059a8; } .img_5 { background: url('画像URL') #777777; } /* ここまで背景設定 */ /* その他の設定 */ .image { background-clip: text; -webkit-background-clip: text; background-color: #555555; color: transparent; } .right { text-align: right; } </style>

アンケートでレイアウト崩れについてご連絡くださった方へ。
私の方でも確認してみますので、どのテンプレートがどんな風に崩れてしまったのか（できればお使いの端末も）教えていただけると嬉しいです。携帯向けサービスのページはユーザー側で編集しきれない部分があるので、直せない場合はご容赦ください。ご迷惑をお掛けして申し訳ないです；；