文字組みを調整したら、アプリ上部の「CSS一式を保存（ZIP）」を押し、sweet-type.zipを展開します。

sweet-type.css

調整した文字組みのスタイル。

sweet-type.js

本文を文字種ごとに分け、CSSを適用するためのスクリプト。

sample.html

書き出したCSS・JSと本文を使った、組み込みの実例。

settings.json

後でエディタに戻して編集するためのデータ。

preview.html

編集時のプレビュー本文。

まず、展開したフォルダのsample.htmlをブラウザで開いて確認してください。自分のHTMLへ組み込む場合は、<head>内にCSSへのリンクを置き、対象の本文をclass="sweet-type"で囲みます。JSは本文の後、</body>の直前で読み込みます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="sweet-type.css">
</head>
<body>
  <div class="sweet-type">
    <p>ここに文字組みを適用したい本文を入れます。</p>
    <p>段落は通常のHTMLで記述できます。</p>
  </div>
  <script src="sweet-type.js"></script>
</body>
</html>

この例はHTML・CSS・JSを同じフォルダに置く場合です。保存場所を変えたら、hrefとsrcも合わせて変更してください。組み幅はsample.htmlの指定を参考に、掲載先のCSSで調整できます。

Webフォントを使った場合は、掲載先でもフォントのCSSを読み込みます。ローカルフォントを指定しただけでは、フォントファイルは書き出されません。

1. 上部の「JSONを保存」でsettings.jsonを保存します。ZIP内の同名ファイルも使えます。
2. 次に編集するときは、本文版の「JSONを読み込み」から保存したJSONを選びます。
3. 設定・本文・保存したスナップショットを読み込み、プレビューで調整します。
4. 変更ができたら、もう一度「CSS一式を保存（ZIP）」で書き出し、サイト側のファイルを更新します。

同じブラウザでは編集内容が自動保存され、次回表示時に読み込まれます。別のブラウザや端末へ移すときはJSONを使ってください。

settings.jsonはエディタへ戻すためのデータです。公開ページにJSONを読み込ませる必要はありません。公開用には、本文のHTMLとsweet-type.css・sweet-type.jsを使います。

本文版には、書き出したCSSをそのままエディタへ読み戻す機能はありません。CSSを直接編集した変更は、保存済みJSONには反映されません。エディタで再調整したい設定はJSONでも残してください。サイト側で本文を変更した場合は、エディタの比較対象欄にもその本文を貼り直して確認できます。

本文版と見出し版のJSONは別の形式です。それぞれ書き出したアプリで読み込んでください。