{"id":810604,"date":"2016-10-16T12:00:28","date_gmt":"2016-10-16T12:00:28","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/non-classifiee\/how-to-create-your-own-font-in-6-simple-steps\/"},"modified":"2016-10-16T12:00:28","modified_gmt":"2016-10-16T12:00:28","slug":"how-to-create-your-own-font-in-6-simple-steps","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/en\/how-to-create-your-own-font-in-6-simple-steps\/","title":{"rendered":"How to Create Your Own Font (In 6 Simple Steps)"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n

With packages such as\u00a0Google Fonts<\/a> and Typekit<\/a> collectively offering thousands of different fonts, there is\u00a0almost a\u00a0countless\u00a0amount options for choosing the right\u00a0font for your specific project. However, you\u2019re still only limited to selecting a font that someone else has created. There are various\u00a0motivations for wanting to create\u00a0your own\u00a0font, and similarly lots of options for doing so.<\/p>\n

This article will take\u00a0you on a step-by-step journey through creating\u00a0a custom\u00a0font with intermediate-level software. We\u2019ll also offer suggestions for some less technical options, as well as more advanced alternatives. However, before that, let\u2019s figure out why<\/em> you\u2019d want to create a font in the first place.<\/p>\n

Why Create a Custom Font?<\/h2>\n

Font creation can become very technical, time-consuming, and expensive \u2013 so it\u2019s worth figuring out how deeply you want to dive\u00a0before you start. The intended use of your font will help decide how much time and financial investment you want to put into its development.<\/p>\n

If it\u2019s just for fun, a basic font creation tool such as\u00a0a handwriting converter<\/a>\u00a0could be all you need. \u00a0If it\u2019s for a specific project, you may want to take the\u00a0time to\u00a0learn some vital techniques, and also use more sophisticated software. This is the route we\u2019ve taken throughout this piece.<\/p>\n

Finally, if you\u2019re creating a font that\u2019s intended for use by others, you\u2019ll likely need to invest a lot more time in the development process, and spend money on\u00a0some professional software.<\/p>\n

Some Basic Tools for Getting Started<\/h2>\n

Before we dive into the tutorial, let\u2019s take a look at some basic tools for those who simply want to have fun creating a custom font. These solutions can also be a good jumping off point for becoming familiar with some of the technicalities of font creation:<\/p>\n

    \n
  1. PaintFont<\/strong><\/a> (Free)<\/strong>:<\/strong> This service enables you to turn your handwriting into a font by filling out and scanning a template.<\/li>\n
  2. FontStruct<\/strong><\/a> (Free)<\/strong>: <\/strong>Using FontStruct, you can create your own font using geometrical shapes.<\/li>\n
  3. Fontself<\/strong><\/a> ($49)<\/strong>:\u00a0<\/strong>This\u00a0enables you to turn hand drawn characters into fonts within Adobe Illustrator<\/a>, and will soon be compatible with Adobe Photoshop<\/a>.<\/li>\n
  4. Metaflop<\/strong><\/a> (Free)<\/strong>:\u00a0<\/strong>This tool\u00a0enables you to customize basic fonts by adjusting a\u00a0simple set of parameters.<\/li>\n<\/ol>\n
    \"Metaflop<\/p>\n

    Metaflop\u2019s design interface is colorful and minimalist.<\/p>\n<\/div>\n

    Now we\u2019ve looked at the simpler options for creating fonts, let\u2019s move onto the more technical method.<\/p>\n

    How to Create Your Own Font (In 6 Simple Steps)<\/h2>\n

    If you\u2019re a little more serious about creating a unique font, and want more customization options, there are several free tools to choose from. However,\u00a0before we get to the software itself, there are a couple of introductory steps we need to take. Let\u2019s tackle each in turn.<\/p>\n

    Step #1: Outline a Design Brief<\/h2>\n

    This is the most important step in the font creation process. As with any design project, it\u2019s imperative that you\u00a0outline your objectives from the outset. Here are some potentially important questions to ask when creating your own design brief:<\/p>\n

      \n
    1. Will your font be project specific, or have a broad application?<\/li>\n
    2. Will that\u00a0application require a large or small font size?<\/li>\n
    3. Do you want the basic font type be Serif or Sans Serif<\/a>?<\/li>\n
    4. Have you come across any fonts you could\u00a0use for inspiration?<\/li>\n<\/ol>\n

      Once you have the answers to these questions, you can then move onto planning out\u00a0your font\u2019s design.<\/p>\n

      Step #2: Start on Paper<\/h2>\n

      While it can be tempting to go straight to your\u00a0software, many professional font tutorials<\/a>\u00a0advise that the early design work should be done on paper. Trying to create the shapes that represent your vision could potentially\u00a0be awkward and time-consuming on a computer, and putting pen to paper is often easier and quicker to begin with.<\/p>\n

      Here are a few useful tips for creating letters on paper:<\/p>\n

        \n
      1. You don\u2019t need to draw a full character set \u2013 recommended \u2018control characters\u2019 are often \u201cH\u201d, \u201cn\u201d, \u201co\u201d and \u201cy\u201d.<\/li>\n
      2. Mark out the baseline<\/a> and other important height lines<\/a> to use as a guide.<\/li>\n
      3. Look at other fonts to see where shapes are repeated within a character set.<\/li>\n
      4. Moving the page, instead of your hand, will allow you to create smoother curves.<\/li>\n<\/ol>\n
        \"Diagram<\/p>\n

        There are plenty of handy graphics on the web to help understand the terminology you\u2019ll need.<\/p>\n<\/div>\n

        For more information on creating letters on paper, you can check out this tutorial from Tuts+<\/a>.<\/p>\n

        Step #3: Choose and Install Your Software<\/h2>\n

        For intermediate typography design there are a number of free applications\u00a0available, and it\u2019s important to choose one that feels comfortable to use, and has the required functionality to get the job done. Here are some of our favorites.<\/p>\n

        1.\u00a0FontForge<\/a><\/h3>\n

        \"Fontforge<\/p>\n

        FontForge<\/a> is an open-source font editor with a huge amount of online documentation<\/a> to guide you through the design process. While the design interface can be a little intimidating at first, once you get used to it FontForge is a powerful tool for creating beautiful custom fonts. You can start from scratch using the available tools, or upload images of fonts to use as a starting point.<\/p>\n

        2.\u00a0Birdfont<\/a><\/h3>\n

        \"Birdfont<\/p>\n

        Birdfont<\/a> is slightly more intuitive than FontForge, so it may be a better option for anyone looking to get started quickly. As with FontForge, you can start your font from scratch using the editor, or upload images<\/a>\u00a0as a starting point. However, while there are<\/em> tutorials available<\/a>, Birdfont doesn\u2019t offer the same depth of supporting information as\u00a0FontForge.\u00a0Birdfont is free for creating fonts under the SIL Open Fonts License<\/a>, but requires a donation of $5 or more for commercial use.<\/p>\n

        3.\u00a0Glyphr Studio<\/a><\/h3>\n

        \"glyphr-studio\"<\/p>\n

        While the above two tools are desktop-based, Glyphr Studio<\/a>\u00a0is strictly web only. As for\u00a0ease of use, Glyphr Studio falls in-between the other solutions on this list. It\u2019s slightly more intuitive than FontForge, and offers more of an aesthetically pleasing design interface than both alternatives. Glyphr Studio also comes with a decent amount of support documentation, though it\u2019s not as in-depth as that of FontForge. In addition, while this tool doesn\u2019t give you the option to upload an image, you can<\/em> upload font files<\/a>\u00a0to\u00a0edit further.<\/p>\n

        While all of these tools have similar offerings, in the end it comes down to a matter of preference.\u00a0You\u00a0could try two (or\u00a0even all three) to see which you are most comfortable with. In any case, it\u2019s worth reading through\u00a0FontForge\u2019s support documentation, just to get a good idea of the overall\u00a0scope of\u00a0the software.<\/p>\n

        Step #4: Start Creating<\/h2>\n

        Once you\u2019ve installed your software, you\u2019re ready to start creating your font. Depending on your software choice you can start from scratch, upload images of your paper drawings, or upload a font file for editing. Once you have your control characters translated, you can\u00a0expand to include letters, numerals, and\u00a0other characters.<\/p>\n

        This part of the process can be quite lengthy to begin with, as each piece of software will have its own\u00a0learning curve. However, once you start getting the hang of things, the process should speed up fairly quickly. To help get you up to speed, here is some of the terminology you\u2019ll need to become familiar with at the start:<\/p>\n

          \n
        1. Glyph:<\/strong> Each individual character within a font is considered a glyph.<\/li>\n
        2. Baseline: <\/strong>The invisible line on which all of the font characters sit.<\/li>\n
        3. Ascender line: <\/strong>The invisible line at which ascenders begin<\/a>.<\/li>\n
        4. Ascender height:<\/strong> The height of the upward vertical stroke on letters such as \u201ch\u201d and \u201ck\u201d.<\/li>\n
        5. Descender depth:<\/strong> The depth of the downward vertical stroke on letters such as\u00a0\u201cp\u201d and \u201cy\u201d.<\/li>\n
        6. Stem:<\/strong> The main vertical stroke of a letter such as \u201cF\u201d and \u201cT\u201d.<\/li>\n
        7. Bowl:<\/strong> The closed rounded part of letters such as\u00a0\u201cb\u201d, \u201cd\u201d and \u201co\u201d.<\/li>\n
        8. B\u00e9zier curve<\/strong><\/a>:<\/strong> A parametric formula\u00a0used to model smooth scalable curves.<\/li>\n<\/ol>\n

          We\u2019ve barely scratched the surface<\/a> here, but if you\u2019re a visual person (likely if you\u2019re creating your own font!), this\u00a0diagram from Thinking with Type<\/a> shows some of the font anatomy we\u2019ve just discussed, and more:<\/p>\n

          \"Font<\/p>\n

          Thinking with Type\u2019s font anatomy diagram is a vital resource for beginner designers.<\/p>\n<\/div>\n

          Step #5: Refine Your Character Set<\/h2>\n

          During the font creation process, it is easy to focus solely on the individual characters. However, it\u2019s also important to consider how the\u00a0font will look as a whole when refining them. Here are a few tips to keep you on track while refining your character set:<\/p>\n

            \n
          1. Pay attention to the spacing and kerning<\/a>\u00a0of the letters by combining a series of them\u00a0during the process.<\/li>\n
          2. Test out various sizes for each character, especially if the application of your\u00a0font has\u00a0the potential to be broad.<\/li>\n
          3. Print your work regularly throughout the design process, as seeing things in print often makes it easier to spot subtle mistakes.<\/li>\n<\/ol>\n

            At this point, you\u2019re almost there! You\u2019ve designed your font, chosen and got to grips with your software, translated it to a digital format, and refined it to perfection. All that\u2019s left now is to upload\u00a0it.<\/p>\n

            Step #6: Upload Your Font to WordPress<\/h2>\n

            Once you\u2019ve finished your custom font, you\u2019ll probably want to start using it. If the intended use for your font is on your own WordPress website, there are a number of upload methods available. The simplest is to use a font plugin, one of the most popular being Use Any Font<\/a>:<\/p>\n

            \"The<\/p>\n

            This plugin automatically converts your font files, extracts the CSS code, and embeds it\u00a0into your theme\u2019s files. It supports TTF<\/em>, OTF<\/em>, and WOFF<\/em>\u00a0files, and once uploaded the font will be available for use in WordPress. This plugin is free for a single font conversion, but a donation of $10 or more will let you convert an unlimited number.<\/p>\n

            If you\u2019d rather not use a plugin, another option is to add you own CSS code. Firstly, you\u2019ll need to use a font generator such as Font Squirrel<\/a> or Transfonter<\/a> to obtain the necessary code. You can then add this code to your theme\u2019s style.css<\/em> file. Going deep on this is outside the scope of this piece, but there are plenty of available guides<\/a>\u00a0on the web to guide you.<\/p>\n

            Advanced Tools for\u00a0Professionals<\/h2>\n

            If you\u2019re looking to go even deeper with\u00a0custom font creation, and want to create fonts for wider usage, there are a number of\u00a0advanced tools available. FontLab Studio<\/a>, FontCreator<\/a>, Glyphs<\/a>, and Robofont<\/a> are some\u00a0popular\u00a0options for professional typographers.<\/p>\n

            Finally, if you\u2019re interested in increasing your typographic knowledge, there are a plethora of wonderful resources to be found all over the web, each focused on creating fonts. To get started, check out the content at sites such as\u00a0I Love Typography<\/a>, Thinking with Type<\/a>, and Creative Bloq<\/a>.<\/p>\n

            Conclusion<\/h2>\n

            Even with the multitude of fonts available, you may still find that none are suitable for your WordPress website. The solution in this case is to crack out the stationery and create your own. By following the steps above, you can create your own beautiful custom font to use on your website, or in other projects.<\/p>\n

            Let\u2019s recap them quickly:<\/p>\n

              \n
            1. Outline a design brief.<\/li>\n
            2. Start sketching control characters on paper.<\/li>\n
            3. Choose and install your software.<\/li>\n
            4. Start creating your font.<\/li>\n
            5. Refine your character set.<\/li>\n
            6. Upload your font to WordPress!<\/li>\n<\/ol>\n

              Have you ever attempted to create your own font, and how did you fare? Let us know in the comments section below, and don\u2019t forget to subscribe so you can follow the conversation!<\/strong><\/p>\n

              Article thumbnail image by<\/i>\u00a0Undrey \/ shutterstock.com.<\/em><\/p>\n

              \n<\/div>\n

              [ad_2]
              \n
              Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

              [ad_1] With packages such as\u00a0Google Fonts and Typekit collectively offering thousands of different fonts, there is\u00a0almost a\u00a0countless\u00a0amount options for choosing the right\u00a0font for your specific project. However, you\u2019re still only limited to selecting a font that someone else has created. There are various\u00a0motivations for wanting to create\u00a0your own\u00a0font, and similarly lots of options for doing […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[529],"tags":[],"class_list":["post-810604","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/810604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/comments?post=810604"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/810604\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/media?parent=810604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/categories?post=810604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/tags?post=810604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}