Nilo Velez

<p>System Fonts enqueues a stylesheet that lets you use the native font on each operating system and defines a system-ui css @font-face that you can use on the customizer, your theme’s settings or your own code.</p>
<h4>Usage example</h4>
<p>The Twenty Seventeen theme uses this css selector for the body text:</p>
<pre><code>body, button, input, select, textarea {
  font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}
</code></pre>
<p>We are going to replace it with the default system font.<br />
In you WordPress site, go to <code>Appearance > Customize > Additional CSS</code> and paste this code</p>
<pre><code>body, button, input, select, textarea {
  font-family: system-ui;
}
</code></pre>
<p>Appart from them font-family, there are other font-properties available:</p>
<ul>
<li>font-style: normal or italic;</li>
<li>font-weight: 300 (light), 400 (regular), 500 (medium), 700 (bold);</li>
</ul>
<p>For example this is the code make an element’s text semibold and cursive:</p>
<pre><code>#my-element {
  font-family: system-ui;
  font-weight: 500;
  font-style: italic;
}
</code></pre>


System Fonts

Enqueues a stylesheet that lets you use the native font on each operating system.

Carlo Roosen

Elena Mukhina

<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/eEccSe--IWc?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<p>Edit your website directly in the front-end. With the wysiwyg inline editor you can modify content just anywhere. You must try it to see how smooth it works!</p>
<p>Direct edit has an amazing image editor. Choose an image, and while you resize or crop it, it will be uploaded to the server automatically. One click and the image is inserted on your page.</p>
<p>Want to learn more? Visit <a href="http://directedit.co" rel="nofollow ugc">http://directedit.co</a>.</p>
<h3>Contribute</h3>
<p>DirectEdit is maintained on <a href="https://github.com/carloroosen/directEdit-FREE" rel="nofollow ugc">https://github.com/carloroosen/directEdit-FREE</a>. Feel free to contribute.</p>
<p>The DirectEdit javascript library is a part of the DirectEdit project. It has a REST interface, and can easily be implemented in other applications.</p>


DirectEdit

Edit your website directly in the frontend.

System Fonts vs DirectEdit