{"id":793,"date":"2020-02-13T09:40:31","date_gmt":"2020-02-13T09:40:31","guid":{"rendered":"https:\/\/webnus.net\/kata\/documentation\/?p=56"},"modified":"2021-10-17T10:25:10","modified_gmt":"2021-10-17T10:25:10","slug":"font-manager","status":"publish","type":"post","link":"https:\/\/webnus.net\/kata\/documentation\/font-manager\/","title":{"rendered":"Font manager"},"content":{"rendered":"\r\n

To make managing your fonts easier, we\u2019ve developed a font manager tool in Kata, which allows you to utilize Google or Adobe fonts and even upload your own custom fonts. You can access this tool by navigating to Kata Control Panel Bar > Admin Panel > Fonts Manager<\/p>\r\n

\"\"<\/a><\/p>\r\n\r\n\r\n\r\n\r\n\r\n

The Fonts Manager page looks like this, and as you can see, it\u2019s very straightforward with its two buttons, Settings and Add New Font. Below these buttons, there is the \u201cNo Font Available.\u201d message, which displays there by default. But if you add a font to your WordPress project, it will be shown in this section.<\/p>\r\n

\"\"<\/a><\/p>\r\n\r\n\r\n\r\n\r\n\r\n

This page will open once you click on the Add New Font button. You\u2019ll choose the font type you want from this section. There are a total of 4 options, each with its respective page that will open once you click on it.<\/p>\r\n

\"\"<\/a><\/p>\r\n

 <\/p>\r\n\r\n\r\n\r\n\r\n\r\n

1) Google Fonts: Once you click on the Google Font box, the following page will open, and you\u2019ll be able to choose the Google Font you want from it.<\/p>\r\n\r\n\r\n\r\n

    \r\n
  1. This field allows you to search for a specific font you want.<\/li>\r\n
  2. This section allows you to enter a text to be displayed below in the font preview boxes.<\/li>\r\n
  3. This section allows you to change the font size in the preview.<\/li>\r\n
  4. This section allows you to filter a certain category of Google Fonts.<\/li>\r\n
  5. This section allows you to filter fonts based on the first letter in their name.<\/li>\r\n
  6. This section allows you to change how the fonts are previewed in the box.<\/li>\r\n
  7. Font Preview Box<\/li>\r\n
  8. This section allows you to choose the style for your selected font and save it.<\/li>\r\n<\/ol>\r\n\"\"<\/a>\r\n\r\n\r\n\r\n\r\n\r\n\r\n

    2) Adobe Fonts: The following page opens once you click on Adobe Fonts. You can choose and save your favorite Adobe font from here.<\/p>\r\n\r\n\r\n\r\n

      \r\n
    1. You can enter your Typekit ID or Stylesheet URL in this section.<\/li>\r\n
    2. You can change the preview text for the font preview box from here.<\/li>\r\n
    3. You can change the font size for the preview from here.<\/li>\r\n
    4. The selected font is displayed here.<\/li>\r\n
    5. You change the font\u2019s status to Published or Unpublished from here.<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n
      \"\"<\/a><\/figure>\r\n\r\n\r\n\r\n

      3) Upload Font: The following page opens once you click on Upload Font. It allows you to upload your own font in otf, ttf, eot, woff, woff2 formats.<\/p>\r\n

      \"\"<\/a><\/p>\r\n\r\n\r\n\r\n\r\n\r\n

      4) Hosted Fonts: If you have a font in another host, you can easily import it by entering the URL for it and use it in your current project.<\/p>\r\n\r\n\r\n\r\n

        \r\n
      1. You can enter your font URL in this section.<\/li>\r\n
      2. You can change the font preview box\u2019s text from here.<\/li>\r\n
      3. You can change the preview text\u2019s font size from here.<\/li>\r\n
      4. Font Preview Box<\/li>\r\n<\/ol>\r\n

        \"\"<\/a><\/p>\r\n

         <\/p>\r\n\r\n\r\n\r\n\r\n\r\n

        In the settings page for Fonts Manager, there are also Export and Import options for fonts used in the project aside from options for the text and font size.<\/p>\r\n

        \"\"<\/a><\/p>\r\n\r\n\r\n\r\n