Fonts 

<div class="grid-container-full">
    <div class="grid-x">
        <div class="cell medium-3">
            <h2 class="sg-title">Island of Ireland <span>ioi, sans-serif</span></h2>
        </div>
        <div class="cell medium-9">
            <div class="grid-x">
                <div class="cell medium-4">
                    <div class="grid-x sg-font-test" style="font-family: ioi, sans-serif; font-weight: bold;">Aa</div>
                    <div class="grid-x">
                        <div class="text--secondary sg-font-style">Bold</div>
                    </div>
                </div>
                <div class="cell medium-4">
                    <div class="grid-x sg-font-test" style="font-family: ioi, sans-serif; ">Aa</div>
                    <div class="grid-x">
                        <div class="text--secondary sg-font-style">Regular</div>
                    </div>
                </div>
                <div class="cell medium-4">
                    <div class="grid-x sg-font-test" style="font-family: ioi, sans-serif; font-style: italic;">Aa</div>
                    <div class="grid-x">
                        <div class="text--secondary sg-font-style">Italic</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="grid-x">
        <div class="cell medium-3">
            <h2 class="sg-title">Proxima Nova <span>Proxima Nova, sans-serif</span></h2>
        </div>
        <div class="cell medium-9">
            <div class="grid-x">
                <div class="cell medium-4">
                    <div class="grid-x sg-font-test" style="font-family: &#x27;Proxima Nova&#x27;, sans-serif; font-weight: bold;">Aa</div>
                    <div class="grid-x">
                        <div class="text--secondary sg-font-style">Bold</div>
                    </div>
                </div>
                <div class="cell medium-4">
                    <div class="grid-x sg-font-test" style="font-family: &#x27;Proxima Nova&#x27;, sans-serif; ">Aa</div>
                    <div class="grid-x">
                        <div class="text--secondary sg-font-style">Regular</div>
                    </div>
                </div>
                <div class="cell medium-4">
                    <div class="grid-x sg-font-test" style="font-family: &#x27;Proxima Nova&#x27;, sans-serif; font-style: italic;">Aa</div>
                    <div class="grid-x">
                        <div class="text--secondary sg-font-style">Italic</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="grid-x">
        <div class="cell medium-3">
            <h2 class="sg-title">Georgia <span>Georgia, sans-serif</span></h2>
        </div>
        <div class="cell medium-9">
            <div class="grid-x">
                <div class="cell medium-4">
                    <div class="grid-x sg-font-test" style="font-family: Georgia, sans-serif; font-weight: bold;">Aa</div>
                    <div class="grid-x">
                        <div class="text--secondary sg-font-style">Bold</div>
                    </div>
                </div>
                <div class="cell medium-4">
                    <div class="grid-x sg-font-test" style="font-family: Georgia, sans-serif; ">Aa</div>
                    <div class="grid-x">
                        <div class="text--secondary sg-font-style">Regular</div>
                    </div>
                </div>
                <div class="cell medium-4">
                    <div class="grid-x sg-font-test" style="font-family: Georgia, sans-serif; font-style: italic;">Aa</div>
                    <div class="grid-x">
                        <div class="text--secondary sg-font-style">Italic</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="grid-container-full">
        {{#each families}}
        <div class="grid-x">
                <div class="cell medium-3">
                        <h2 class="sg-title">{{title}} <span>{{fontname}}</span></h2>
                </div>
                <div class="cell medium-9">
                        <div class="grid-x">
                                {{#each fonts}}
                                        <div class="cell medium-4">
                                                <div class="grid-x sg-font-test" style="font-family: {{family}}; {{style}}">Aa</div>
                                                <div class="grid-x">
                                                        <div class="text--secondary sg-font-style">{{styleName}}</div>
                                                </div>
                                        </div>
                                {{/each}}
                        </div>
                </div>
        </div>
                {{#each examples}}
                <div class="grid-x">
                        <div class="cell medium-3">
                        </div>
                        <div class="cell medium-9">
                        <div class="grid-x sg-example-text">
                                <h2 class="sg-example-title" style="font-family: {{family}}; {{style}};">The spectacle before us was indeed sublime.</h2>
                                <p>Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.</p>
                        </div>
                        </div>
                </div>
                {{/each}}
        {{/each}}
</div>
 
{
  "families": [
    {
      "title": "Island of Ireland",
      "fontname": "ioi, sans-serif",
      "fonts": [
        {
          "styleName": "Bold",
          "style": "font-weight: bold;",
          "family": "ioi, sans-serif"
        },
        {
          "styleName": "Regular",
          "family": "ioi, sans-serif"
        },
        {
          "styleName": "Italic",
          "style": "font-style: italic;",
          "family": "ioi, sans-serif"
        }
      ]
    },
    {
      "title": "Proxima Nova",
      "fontname": "Proxima Nova, sans-serif",
      "fonts": [
        {
          "styleName": "Bold",
          "style": "font-weight: bold;",
          "family": "'Proxima Nova', sans-serif"
        },
        {
          "styleName": "Regular",
          "family": "'Proxima Nova', sans-serif"
        },
        {
          "styleName": "Italic",
          "style": "font-style: italic;",
          "family": "'Proxima Nova', sans-serif"
        }
      ]
    },
    {
      "title": "Georgia",
      "fontname": "Georgia, sans-serif",
      "fonts": [
        {
          "styleName": "Bold",
          "style": "font-weight: bold;",
          "family": "Georgia, sans-serif"
        },
        {
          "styleName": "Regular",
          "family": "Georgia, sans-serif"
        },
        {
          "styleName": "Italic",
          "style": "font-style: italic;",
          "family": "Georgia, sans-serif"
        }
      ]
    }
  ]
}

There are no notes for this item.