<h2>{{ title }}</h2>
<p>
    This sample shows how custom fonts can be embedded into a document.
    <a href="" target="_self" data-toggle="collapse" data-target=".collapse" class="collapse in read-more">Read More</a>
</p>

<div class="collapse">
    <p>
        In this sample, the <a href="https://github.com/mozilla/Fira">Fira</a> font family is used
        and two fonts, <b>FiraSans-Regular.ttf</b> and <b>FiraSans-Bold.ttf</b>, are embedded into the
        document. The FiraSans-Bold.ttf font is used to display the header cells, while the 
        FiraSans-Regular.ttf font is used for rest of the content.
    </p>
    <p>
        To achieve this, the following export settings are used:
    </p>
    <ul>
        <li>
            <b>embeddedFonts</b>: Provides information to the export library, about custom
             fonts to be embedded, such as URL, name, style, weight.
        </li>
        <li>
            <b>styles</b>: It is used to set up the style for the grid cells and 
            link them with the embedded fonts during export.
        </li>
    </ul>
</div>

<!-- Export button -->
<button class="btn btn-default" id="Button1" ng-click="export()">Export</button>

<!-- FlexGrid -->
<wj-flex-grid class="grid"
        control="ctx.grid"
        selection-mode="ListBox"
        headers-visibility="All"
        items-source="ctx.data">
    <wj-flex-grid-column header="ID" binding="id"></wj-flex-grid-column>
    <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
    <wj-flex-grid-column header="Product" binding="product"></wj-flex-grid-column>
    <wj-flex-grid-column header="Discount" binding="discount" format="p1"></wj-flex-grid-column>
    <wj-flex-grid-column header="Active" binding="active"></wj-flex-grid-column>
</wj-flex-grid>
