{% import 'item/preview.macros.njk' as preview %}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <base target="_parent">

  <title>fonts</title>

  {% if customPreviewCSS %}
    <!-- App preview CSS -->
    <style>
      {{ customPreviewCSS | safe }}
    </style>
  {% endif %}

  <!-- Herman iframe styles -->
  <link rel="stylesheet" href="assets/webpack/iframe_styles.min.css" />

  {% if fontsHTML %}
    <!-- Custom Font HTML -->
    {{ fontsHTML|safe }}
  {% endif %}

  {% if item.font.localFontCSS %}
    <!-- Local font @font-face CSS -->
    <style type="text/css">
{{ item.font.localFontCSS|safe }}
    </style>
  {% endif %}
</head>
<body data-herman-preview='font'>
  {%- set key = item.font.key -%}
  {%- set data = sassjson.fonts[key] -%}
  {%- if data and item.font.parsedVariants and item.font.parsedVariants|length -%}
    {%- for variant in item.font.parsedVariants -%}
      {{ preview.specimen_variant(variant, data) }}
    {%- endfor -%}
  {%- endif -%}
</body>
</html>
