🎉 Custom fonts section

user-guide/custom-fonts/index.njk

@@ -0,0 +1,35 @@
+---
+title: 17· Custom fonts
+---
+
+<h1 id="customfonts">Custom fonts</h1>
+<p class="main-paragraph">If you have purchased or personal fonts that are not included in the catalog provided by Penpot, you can upload them from your computer and use them across the files of a team. <p>
+
+<h3 id="customfonts-upload">Upload local fonts</h3>
+<p>To use at Penpot a font that you have at your local machine, you need to upload it first to the Penpot team where you want it.</p>
+<p>You can find the “Fonts” section in the dashboard menu, at the left sidebar.</p>
+<p><a href="/img/customfonts.png" target="_blank"><img src="/img/customfonts.png" alt="local fonts" /></a></p>
+
+<h4>To upload a local font:</h4>
+<ol>
+<li>Press “Add custom font”.</li>
+<li>Inspect your local files to select one or more fonts that you want to upload. <strong>You can upload fonts with the following formats: TTF and OTF</strong> (only one will be needed).</li>
+<li>Change the font name if needed. The font name is the name that will be shown in the font list at the workspace. It is also what Penpot uses to group fonts in families. You will always have the opportunity to edit it later.</li>
+<li>Once ready, press upload. That's it. The font will be available at the font list of this team’s files.</li>
+</ol>
+<p><a href="/img/customfonts-upload.png" target="_blank"><img src="/img/customfonts-upload.png" alt="local fonts" /></a></p>
+
+<h3 id="customfonts-families">Group fonts in font families</h3>
+<p>Fonts with the same font family name will be grouped as a single font family. That means that at the font list that you will use at the files they will be shown as only one font with different variants available. </p>
+<p>If you want to add a font variant (eg: Light) to a font family (eg: Helvetica) you only need to ensure at the upload that it has the same font family name.</p>
+<p><a href="/img/customfonts-families.png" target="_blank"><img src="/img/customfonts-families.png" alt="local fonts" /></a></p>
+
+<h3 id="customfonts-edit">Edit custom fonts</h3>
+<p>At the right side of a font family of the custom fonts list you can find a menu that allows you to edit the name of a font family and delete it.</p>
+
+<h3 id="customfonts-using">Using custom fonts</h3>
+<p>Custom fonts are added to the fonts catalog of a team and can be used at the workspace from the font list at the design sidebar.</p>
+<p><img src="/img/customfonts-use.gif" alt="local fonts" /></p>
+
+<h3>Fonts Licensing and Usage</h3>
+<p>You should only upload fonts you own or have license to use in Penpot. Find out more in the Content rights section of <a href="https://penpot.app/terms.html" target="_blank">Penpot's Terms of Service</a>. You also might want to read about <a href="https://www.typography.com/faq" target="_blank">font licensing</a>.</p>