CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <link rel="stylesheet" href="/assets/css/just-the-docs-default.css"> <script src="/assets/js/vendor/lunr.min.js"></script> <script src="/assets/js/just-the-docs.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="/assets/images/favicon.ico" type="image/x-icon">  <title>Graphite and Firefox | Graphite</title> <meta name="generator" content="Jekyll v4.3.2" /> <meta property="og:title" content="Graphite and Firefox" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="Site for Graphite" /> <meta property="og:description" content="Site for Graphite" /> <link rel="canonical" href="https://silnrsi.github.io/graphite/graphite_firefox.html" /> <meta property="og:url" content="https://silnrsi.github.io/graphite/graphite_firefox.html" /> <meta property="og:site_name" content="Graphite" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary" /> <meta property="twitter:title" content="Graphite and Firefox" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","description":"Site for Graphite","headline":"Graphite and Firefox","url":"https://silnrsi.github.io/graphite/graphite_firefox.html"}</script>  </head> <body> <a class="skip-to-main" href="#main-content">Skip to main content</a> <svg xmlns="http://www.w3.org/2000/svg" class="d-none"> <symbol id="svg-link" viewBox="0 0 24 24"> <title>Link</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"> <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> </svg> </symbol> <symbol id="svg-menu" viewBox="0 0 24 24"> <title>Menu</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"> <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line> </svg> </symbol> <symbol id="svg-arrow-right" viewBox="0 0 24 24"> <title>Expand</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"> <polyline points="9 18 15 12 9 6"></polyline> </svg> </symbol>  <symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"> <title id="svg-external-link-title">(external link)</title> <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line> </symbol> <symbol id="svg-doc" viewBox="0 0 24 24"> <title>Document</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"> <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline> </svg> </symbol> <symbol id="svg-search" viewBox="0 0 24 24"> <title>Search</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"> <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </symbol>  <symbol id="svg-copy" viewBox="0 0 16 16"> <title>Copy</title> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/> <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/> </svg> </symbol> <symbol id="svg-copied" viewBox="0 0 16 16"> <title>Copied</title> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16"> <path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/> </svg> </symbol> </svg> <div class="side-bar"> <div class="site-header" role="banner"> <a href="/" class="site-title lh-tight"> Graphite </a> <button id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false"> <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg> </a> </div> <nav aria-label="Main" id="site-nav" class="site-nav"> <ul class="nav-list"><li class="nav-list-item"><a href="/" class="nav-list-link">Home</a></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="toggle items in About Graphite category" aria-pressed="false"> <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> </button><a href="/graphite_about.html" class="nav-list-link">About Graphite</a><ul class="nav-list"><li class="nav-list-item "><a href="/graphite_aboutWhy.html" class="nav-list-link">Why was Graphite developed?</a></li><li class="nav-list-item "><button class="nav-list-expander btn-reset" aria-label="toggle items in Graphite and OpenType category" aria-pressed="false"> <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> </button><a href="/graphite_aboutOT.html" class="nav-list-link">Graphite and OpenType</a><ul class="nav-list"><li class="nav-list-item "> <a href="/graphite_otcompare.html" class="nav-list-link">Comparison of OpenType and Graphite shaping speeds in a Nastaliq context</a> </li></ul></li><li class="nav-list-item "><a href="/graphite_techAbout.html" class="nav-list-link">Graphite technical overview</a></li></ul></li><li class="nav-list-item"><a href="/graphite_news.html" class="nav-list-link">News</a></li><li class="nav-list-item active"><button class="nav-list-expander btn-reset" aria-label="toggle items in Using Graphite category" aria-pressed="true"> <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> </button><a href="/graphite_appsParent.html" class="nav-list-link">Using Graphite</a><ul class="nav-list"><li class="nav-list-item "><a href="/graphite_apps.html" class="nav-list-link">Applications that support Graphite</a></li><li class="nav-list-item active"><a href="/graphite_firefox.html" class="nav-list-link active">Graphite and Firefox</a></li><li class="nav-list-item "><a href="/graphite_fontdemo.html" class="nav-list-link">Graphite Font Demo</a></li><li class="nav-list-item "><a href="/graphite_fonts.html" class="nav-list-link">Graphite-enabled Fonts</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="toggle items in Developers category" aria-pressed="false"> <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> </button><a href="/graphite_dev.html" class="nav-list-link">Developers</a><ul class="nav-list"><li class="nav-list-item "><a href="/graphite_devFont.html" class="nav-list-link">Font Development</a></li><li class="nav-list-item "><a href="/graide.html" class="nav-list-link">Graide</a></li><li class="nav-list-item "><button class="nav-list-expander btn-reset" aria-label="toggle items in Graphite Tutorial category" aria-pressed="false"> <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> </button><a href="/graide_tutorial.html" class="nav-list-link">Graphite Tutorial</a><ul class="nav-list"><li class="nav-list-item "> <a href="/tutorial/graide_tutorial1.html" class="nav-list-link">Unit 1</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial2.html" class="nav-list-link">Unit 2</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial3.html" class="nav-list-link">Unit 3</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial4.html" class="nav-list-link">Unit 4</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial5.html" class="nav-list-link">Unit 5</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial6.html" class="nav-list-link">Unit 6</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial7.html" class="nav-list-link">Unit 7</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial8.html" class="nav-list-link">Unit 8</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial8a.html" class="nav-list-link">Intermission</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial9.html" class="nav-list-link">Unit 9</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial10.html" class="nav-list-link">Unit 10</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial11.html" class="nav-list-link">Unit 11</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial12.html" class="nav-list-link">Unit 12</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial13.html" class="nav-list-link">Unit 13</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial14.html" class="nav-list-link">Unit 14</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial15.html" class="nav-list-link">Unit 15</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial16.html" class="nav-list-link">Unit 16</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial17.html" class="nav-list-link">Unit 17</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial18.html" class="nav-list-link">Unit 18</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial_end.html" class="nav-list-link">Conclusion</a> </li><li class="nav-list-item "> <a href="/tutorial/graphite_tut_solutions.html" class="nav-list-link">Solutions to Tutorial Exercises</a> </li></ul></li><li class="nav-list-item "><a href="/graphite_codeSnippets.html" class="nav-list-link">GDL Code Snippets</a></li><li class="nav-list-item "><a href="/graphite_devApp.html" class="nav-list-link">Adding Graphite to Your Application</a></li></ul></li><li class="nav-list-item"><a href="/graphite_download.html" class="nav-list-link">Download</a></li><li class="nav-list-item"><a href="/graphite_support.html" class="nav-list-link">Support</a></li><li class="nav-list-item"><a href="/graphite_contact.html" class="nav-list-link">Contact</a></li></ul> </nav> <footer class="site-footer"> This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll. </footer> </div> <div class="main" id="top"> <div id="main-header" class="main-header"> <div class="search" role="search"> <div class="search-input-wrap"> <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search Graphite site" aria-label="Search Graphite site" autocomplete="off"> <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label> </div> <div id="search-results" class="search-results"></div> </div> <nav aria-label="Auxiliary" class="aux-nav"> <ul class="aux-nav-list"> <li class="aux-nav-list-item"> <a href="https://github.com/silnrsi/graphite" class="site-button" > Repository </a> </li> </ul> </nav> </div> <div id="main-content-wrap" class="main-content-wrap"> <nav aria-label="Breadcrumb" class="breadcrumb-nav"> <ol class="breadcrumb-nav-list"> <li class="breadcrumb-nav-list-item"><a href="/graphite_appsParent.html">Using Graphite</a></li> <li class="breadcrumb-nav-list-item"><span>Graphite and Firefox</span></li> </ol> </nav> <div id="main-content" class="main-content"> <main> <h1 id="using-graphite-in-mozilla-firefox"> <a href="#using-graphite-in-mozilla-firefox" class="anchor-heading" aria-labelledby="using-graphite-in-mozilla-firefox"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Using Graphite in Mozilla Firefox </h1> <h2 id="graphite-in-firefox"> <a href="#graphite-in-firefox" class="anchor-heading" aria-labelledby="graphite-in-firefox"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Graphite in Firefox </h2> <p>Versions 11 and later of Mozilla Firefox 11 directly support Graphite on Mac OS X, Linux, Windows and Android platforms. A web page can be rendered using both local and server-based fonts, and specific Graphite font features can be controlled via CSS.</p> <p>Graphite is automatically activated in Firefox. In early versions this support was not switched on by default and needed to be enabled by the user. If you have a version of Firefox prior to 28, see below for instructions on how to activate it.</p> <p>To see Graphite in operation, you need a web page uses some CSS referring to a Graphite-enabled font. The font can either be installed on your own system or remotely used as a web font.</p> <p>Graphite is also supported in Pale Moon, a browser based on a fork of Firefox.</p> <h2 id="testing-graphite-behaviors-in-firefox"> <a href="#testing-graphite-behaviors-in-firefox" class="anchor-heading" aria-labelledby="testing-graphite-behaviors-in-firefox"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Testing Graphite behaviors in Firefox </h2> <p>Now you can test content relying on smart behaviors in a Graphite-enabled font.</p> <p>Go to <a href="graphite_fontdemo">Graphite Font Demo</a> to see some sample fonts rendering in your Firefox browser.</p> <h2 id="using-graphite-font-features-in-firefox"> <a href="#using-graphite-font-features-in-firefox" class="anchor-heading" aria-labelledby="using-graphite-font-features-in-firefox"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Using Graphite font features in Firefox </h2> <p>It is possible to make use of Graphite font features in an HTML page by specifying them with CSS. To do this you must know the ID of the feature of interest in the font and the value you wish to use. This information should be included in the font documentation.</p> <blockquote class="blue-note"> <p><strong>NOTE</strong></p> <p>Some earlier Graphite-enabled fonts used numerical feature IDs which will not work in Firefox. The following maintenance releases of SIL’s Roman and Cyrillic fonts are available that use 4-character IDs: <a href="https://scripts.sil.org/cms/scripts/page.php?item_id=DoulosSIL_download#4112" target="_blank">↗ Doulos SIL 4.112</a>, <a href="https://scripts.sil.org/cms/scripts/page.php?item_id=CharisSIL_download#4112" target="_blank">↗ Charis SIL 4.112</a>, <a href="https://scripts.sil.org/cms/scripts/page.php?item_id=Andika_download#1004" target="_blank">↗ Andika 1.004</a>, and <a href="https://scripts.sil.org/cms/scripts/page.php?item_id=Gentium_download#1510" target="_blank">↗ Gentium Plus 1.510</a>; later versions of these fonts will also work.</p> </blockquote> <p>The CSS syntax is:</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><css-style-name> { -moz-font-feature-settings: "<feature-id>" <feature-value>; } </code></pre></div></div> <p>The <code class="language-plaintext highlighter-rouge"><feature-value></code> is optional and if omitted will be assumed to be 1.</p> <p>Note that for Firefox version 14 and earlier, the syntax is:</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><css-style-name> { -moz-font-feature-settings: "<feature-id>=<feature-value>"; } </code></pre></div></div> <p>To be on the safe side, you can use these two syntaxes simultaneously.</p> <p>For instance, if you have a font called “My Graphite Font” and with a feature ID of ‘alts’, the following would define a CSS style using this font with the feature set to the value 2:</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.alternate_font_style { font-family: "My Graphite Font", <other fallback fonts>; /* new syntax: */ -moz-font-feature-settings: "alts" 2; /* old syntax: */ -moz-font-feature-settings: "alts=2"; } </code></pre></div></div> <p>To indicate more than one feature, use a comma as a delimiter:</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.alternate_font_style { font-family: "My Graphite Font", <other fallback fonts>; /* new syntax: */ -moz-font-feature-settings: "fea1" 2, "fea2" 6, "fea3"; /* fea3 is 1 or 'on' */ /* old syntax: */ -moz-font-feature-settings: "fea1=2,fea2=6,fea3"; } </code></pre></div></div> <p>More complete documentation of feature settings in CSS can be found at <a href="http://dev.w3.org/csswg/css3-fonts/#propdef-font-feature-settings" target="_blank">↗ http://dev.w3.org/csswg/css3-fonts/#propdef-font-feature-settings</a>.</p> <p>For more detail on how to specify fonts on web pages see <a href="https://software.sil.org/fonts/webfonts" target="_blank">↗ Using SIL Fonts on Web Pages</a>.</p> <h2 id="supported-platforms"> <a href="#supported-platforms" class="anchor-heading" aria-labelledby="supported-platforms"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Supported platforms </h2> <p>This Graphite support has been tested and is known to work on the following platforms:</p> <ul> <li>Windows 10</li> <li>Windows 11</li> <li>Ubuntu 11.10</li> <li>Mac OS X 10.7.3</li> </ul> <h2 id="switching-on-graphite-in-early-versions-of-firefox"> <a href="#switching-on-graphite-in-early-versions-of-firefox" class="anchor-heading" aria-labelledby="switching-on-graphite-in-early-versions-of-firefox"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Switching on Graphite in early versions of Firefox </h2> <blockquote class="blue-note"> <p><strong>Note</strong></p> <p>These instructions to not apply to the FirefoxOS in which Graphite is enabled by default and cannot be disabled.</p> </blockquote> <p>If you have a version of Firefox earlier than 28, or 45.0.1 or later, the Graphite enabling might not be switched on by default, and you need to go into the advanced configuration settings manager to switch it on before you can use it.</p> <p>Make sure you have a version of Mozilla Firefox 11 or later installed, then go through the following steps:</p> <ul> <li>Type <code class="language-plaintext highlighter-rouge">about:config</code> in your address bar.</li> <li>Press <em>Enter</em>.</li> <li>Click on the <em>“I’ll be careful, I promise”</em> button. This big warning is to make sure you really know what you are doing when changing any advanced parameters, as you could easily introduce problems with core configuration settings. We will only make a small change to one Graphite-related parameter. (You should be able to go back and toggle parameters off if needed.)</li> <li>Type <em>graphite</em> in your search bar to look for the right parameter. Firefox will show you the following configuration preference name: <em>gfx.font_rendering.graphite.enabled</em>. Alternatively, you can just scroll down the page to find an option called <em>gfx.font_rendering.graphite.enabled</em>.</li> <li>Double-click on the preference name line to set the value from false to true. You will see the whole line becoming bold.</li> </ul> </main> <hr> <footer> <p class="text-small text-grey-dk-100 mb-0">Copyright © 2012-2023 SIL International and released under the <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 license (CC-BY-SA)</a> unless noted otherwise.</p> </footer> </div> </div> <div class="search-overlay"></div> </div> </body> </html>