smufl.xhtml

---
layout: verovio
verovio-light: true
title: Verovio – SMuFL
active: how
how-active: how-smufl
---

<div class="row">
    <div class="col-md-3 sidebar-offcanvas" id="sidebar" role="navigation">
        <div class="panel panel-default">
            {% include how-sidebar.html %}
        </div>
    </div>
    
    <div class="col-md-9">
        <div class="panel-body">
            <h3>Music fonts</h3>
            <div class="row">
                <div class="col-sm-9">
                    <p>
                        Verovio follows the <a href="http://www.smufl.org" target="_blank">Standard Music Font Layout (SMuFL)</a> specification. It means that it is easily possible to change the music font used in Verovio and to have a personalised output.
    Verovio includes the Leipzig font, its own SMuFL-compliant music font. 
                    </p>

                    <p>
                        It also supports and includes the <a href="http://www.smufl.org/fonts/" target="_blank">Bravura</a> font designed by Daniel Spreadbury. The Gootville font is a <a href="http://www.musescore.org" target="_blank">MuseScore</a> font and is also included by default in Verovio.
                    </p>

                    <p>
                        Once included, a font can be selected by setting the font option accordingly. For example, the Bravura font can be selected with the <code>--font=Bravura</code> option in the command-line tool or by adding <code>{ font: "Bravura" }</code> in the JavaScript toolkit options.
                    </p> 
                </div>
                <div class="col-sm-3 text-center">
                    <table align="center">
                        <tr>
                            <td>
                                <a href="http://www.smufl.org" target="_blank">
                                    <img src="{{ site.baseurl }}/images/smufl.png" style="padding: 30px 0px;" class="img-responsive"/>
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            
            <h4></h4>
            
            <div class="row">
                <div class="col-xs-12 col-sm-3">
                    <h3>Leipzig</h3>
                </div>
                <div class="col-xs-12 col-sm-9 text-center">
                    <img src="{{ site.baseurl }}/examples/fonts/Leipzig.png" style="padding: 10px 20px;" class="img-responsive"/>
                </div>
                <div class="col-xs-12 col-sm-3">
                    <h3>Bravura</h3>
                </div>
                <div class="col-xs-12 col-sm-9 text-center">
                    <img src="{{ site.baseurl }}/examples/fonts/Bravura.png" style="padding: 10px 20px;" class="img-responsive"/>
                </div>
                <div class="col-xs-12 col-sm-3">
                    <h3>Gootville</h3>
                </div>
                <div class="col-xs-12 col-sm-9 text-center">
                    <img src="{{ site.baseurl }}/examples/fonts/Gootville.png" style="padding: 10px 20px;" class="img-responsive"/>
                </div>
            </div>
        </div>
    </div>
</div>