{"id":9340,"date":"2019-10-10T12:55:17","date_gmt":"2019-10-10T11:55:17","guid":{"rendered":"https:\/\/tests.designersuiteforwp.com\/?p=8978"},"modified":"2023-08-12T18:22:42","modified_gmt":"2023-08-12T17:22:42","slug":"how-to-add-your-own-fonts-with-nati","status":"publish","type":"post","link":"https:\/\/www.orionorigin.com\/how-to-add-your-own-fonts-with-nati\/","title":{"rendered":"How to add your own fonts &#8211; Nati Custom Lettering Designer"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\" style=\"font-size:23px\"><strong>What is the font feature?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Fonts are one of the most critical yet basic features when doing design and our custom lettering designer plugin is built to prioritize this for you. Nati, our Custom Lettering Designer plugin does not only allow you to use Google fonts in your designs but also to add custom TTF fonts which you can use directly on the canvas and in the output PDF files.<\/p>\n\n\n\n<div class=\"wp-block-cover is-light orion-cta-style\" style=\"min-height:217px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-80 has-background-dim\" style=\"background-color:#5c54ff\"><\/span><img decoding=\"async\" class=\"wp-block-cover__image-background wp-image-157867\" alt=\"\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2023\/05\/5.png\" data-object-fit=\"cover\" title=\"\"><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div id=\"wp-block-themeisle-blocks-advanced-columns-678cc482\" class=\"wp-block-themeisle-blocks-advanced-columns has-1-columns has-desktop-equal-layout has-tablet-equal-layout has-mobile-equal-layout has-vertical-bottom ticss-c00aadba has-dark-bg\"><div class=\"wp-block-themeisle-blocks-advanced-columns-overlay\"><\/div><div class=\"innerblocks-wrap\">\n<div id=\"wp-block-themeisle-blocks-advanced-column-4d412c51\" class=\"wp-block-themeisle-blocks-advanced-column\">\n<h4 id=\"wp-block-themeisle-blocks-advanced-heading-fb3c7a39\" class=\"wp-block-themeisle-blocks-advanced-heading wp-block-themeisle-blocks-advanced-heading-fb3c7a39\">&nbsp;Easily attract more customers and grow your business by using our Custom Product Designer for Woocommerce.<\/h4>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-fe48e5de wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-primary is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link has-white-color has-text-color wp-element-button\" href=\"https:\/\/wordpress.org\/plugins\/woocommerce-products-designer\/?utm_source=google&amp;utm_medium=article&amp;utm_campaign=Ouidah+Free+Version&amp;utm_id=8106\" style=\"border-radius:0px\" target=\"_blank\" rel=\"noreferrer noopener\">Download now<\/a><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n<p>The Fonts interface allows you to define which fonts you would like your clients to use when adding text to their designs. If you don\u2019t define any font, the system default fonts will be used. See how to manage fonts in the plugin below:<\/p>\n<h4>To manage the fonts, go to CLD &gt; <b>Fonts<\/b> to access the fonts list.<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-8982 size-full\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2019\/10\/fonts-3.png\" alt=\"\" width=\"1358\" height=\"461\" title=\"\"><\/p>\n<h2><span style=\"font-size: 14pt;\">How to add Google Fonts?<\/span><\/h2>\n<p>Google Fonts are one of the most popular and free web fonts libraries in the world. To add a Google font:<\/p>\n<p>1. Click on the fonts dropdown in order to select the one you want.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-medium wp-image-723\" style=\"width: 50%; display: block; margin: 20px 0;\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2019\/10\/woocommerce-product-designer-add-google-font-1.png\" alt=\"\" title=\"\"><\/p>\n<p>2. You\u2019ll need to define the TTF fonts which will be needed to be used in the output files. We will talk about it in the third section of this tutorial.<\/p>\n<p>3. Click on the <b>Add Font<\/b> button to save your newly selected font into the product designer.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-medium wp-image-724\" style=\"width: 50%; display: block; margin: 20px 0;\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2019\/10\/woocommerce-product-designer-add-google-font-button-1.png\" alt=\"\" title=\"\"><\/p>\n<h2><span style=\"font-size: 14pt;\">How to add custom web fonts?<\/span><\/h2>\n<ol>\n<li>Enter the font name in the name field.<\/li>\n<li>Enter the font css file URL in the URL field.<\/li>\n<li>You\u2019ll need to define the TTF fonts that will need to be used in the output files but we\u2019ll get back to it in the third section of this tutorial.<\/li>\n<li>Click on the <b>Add Font<\/b> button to save your newly selected font into the product designer.<\/li>\n<\/ol>\n<h2><span style=\"font-size: 14pt;\">How to add TTF fonts in Nati Custom Lettering Designer?<\/span><\/h2>\n<p>Custom TTF fonts are also supported by our Nati Custom Lettering designer. In order to add a TTF file take the following steps:<\/p>\n<ol>\n<li>Visit <a href=\"https:\/\/transfonter.org\/\" target=\"_blank\" rel=\"noopener\">https:\/\/transfonter.org\/<\/a> to convert your TTF file to a web ready file. This will make sure your file can be read by any browser.<\/li>\n<li>Enter the font name in the name field.<\/li>\n<li>Leave the URL field empty.<\/li>\n<li>Click on the <b>Add font file button<\/b> to select the converted TTF file from the step 1 related to the font you\u2019re trying to add using wordpress\u2019s default media uploader.<\/li>\n<li>Each TTF file contains one or multiple font styles such as italic, bold and other. You need to make sure the TTF font file you just set has all it\u2019s styles properly checked. For example, the ALEO font comes in multiple files such as:\n<ul>\n<li>Regular<\/li>\n<li>Regular Italic<\/li>\n<li>Bold<\/li>\n<li>Bold Italic<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>While defining the font files, you\u2019ll need to make sure that the \u201cregular\u201d ttf file has only the regular style checked. Then the \u201cRegular Italic\u201d will have both styles checked and so on.<\/p>\n<p>Click on the <b>Add Font<\/b> button to save your newly selected font into the product designer.<\/p>\n<p>That&#8217;s it. Still, having issues adding fonts? Reach out to us via the comment section below or through our support center.<\/p>","protected":false},"excerpt":{"rendered":"<p>What is the font feature? Fonts are one of the most critical yet basic features when doing design and our custom lettering designer plugin is built to prioritize this for you. Nati, our Custom Lettering Designer plugin does not only allow you to use Google fonts in your designs but also to add custom TTF [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":944,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[420],"tags":[95,306,36,17],"class_list":["post-9340","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lettering-and-signs-designer","tag-fonts","tag-nati-custom-lettering-designer","tag-woocommerce","tag-wordpress"],"acf":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/9340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/comments?post=9340"}],"version-history":[{"count":8,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/9340\/revisions"}],"predecessor-version":[{"id":159129,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/9340\/revisions\/159129"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/media\/944"}],"wp:attachment":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/media?parent=9340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/categories?post=9340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/tags?post=9340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}