{"id":8682,"date":"2018-01-09T12:11:58","date_gmt":"2018-01-09T12:11:58","guid":{"rendered":"http:\/\/rifetheme.com\/help\/docs\/customizing-the-theme\/general-settings\/fonts-settings\/"},"modified":"2021-12-06T14:50:04","modified_gmt":"2021-12-06T14:50:04","slug":"fonts-settings","status":"publish","type":"docs","link":"https:\/\/rifetheme.com\/help\/docs\/customizing-the-theme\/general-settings\/fonts-settings\/","title":{"rendered":"Fonts settings"},"content":{"rendered":"

Accessed in Appearance \u2192 Customize \u2192\u00a0General settings \u2192 Fonts settings.<\/strong><\/p>\n

Here you can choose fonts for your page. You can set font for 3 main layout elements:<\/p>\n

    \n
  1. Font for top nav menu, interactive elements, short labels, etc.<\/strong><\/li>\n
  2. Font for Titles\/Headings<\/strong><\/li>\n
  3. Font for normal(content) text<\/strong> – text in posts\/pages, and other places with a lot of text.<\/li>\n
  4. Font for text logo<\/strong> – available since Rife Free\/Pro 1.8.3<\/strong><\/li>\n<\/ol>\n

    Using System Fonts<\/h3>\n

    If you choose the System font<\/strong> for some group then remember that this setting depends on fonts installed on a client device. However it is fastest loading option.<\/p>\n

    Font family rule looks like this: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif<\/code><\/p>\n

    By selecting this font you will use system font of device that your site is opened in. It is good for “native” feeling of your website.<\/p>\n

    More on which font will be used on which device.<\/a><\/p>\n

    Using Google Webfonts<\/h3>\n

    If you choose Google Webfont<\/strong> then remember to choose needed variants and subsets. For the preview, google font is loaded with variants regular and 700, and all available subsets.<\/p>\n

    You have to select what subset of chars do you need for your language, and also what styles you wish to use.<\/p>\n

    For example, fonts for titles should always be selected with bold style(600 or 700), unless it is set different. In another case, the browser will try to emulate bold face of font, and it might look strange.<\/p>\n

    Same with the font for content —\u00a0 you should choose a font that has bold, italic and maybe italic bold style.<\/p>\n

    On the other hand, if some variant will not be used in your page you shouldn’t select it, cause it will only make loading of your page slower. Same goes for subsets.<\/p>\n

    If you will write mainly in English then you should be good with almost any font. If your language has some different chars you should always test your selected font.<\/p>\n

    Using Typekit webfonts<\/h3>\n

    There is no in theme build in support for Typekit, but it is still simple to use Typekit fonts if you are familiar with Typekit.<\/p>\n

    Just follow below steps:<\/p>\n

      \n
    1. Install Typekit plugin <\/strong>—\u00a0 Get it from here<\/a> or look for “Typekit Fonts for WordPress” in plugins installation panel in your WordPress.<\/li>\n
    2. Activate the plugin<\/strong> and go to Settings \u2192 Typekit Fonts<\/strong><\/li>\n
    3. in Typekit Embed Code<\/strong> field add code that you received from Typekit. It will look something like that:\n
      <script src=\"https:\/\/use.typekit.net\/x22owobf.js\"><\/script>\r\n<script>try{Typekit.load({ async: true });}catch(e){}<\/script><\/code><\/pre>\n<\/li>\n
    4. in Custom CSS Rules<\/strong> field add CSS for one, or more, below groups.<\/li>\n<\/ol>\n
      Example<\/h4>\n
      Let’s say you want to use font “Europa” that you have added to your kit in Typekit. Then replace “font-name” with “europa” in below code examples.<\/p>\n
      Text content font:<\/strong><\/p>\n
      \/* Text content font *\/\r\n    html,input,select,textarea{\r\n        font-family: \"font-name\", sans-serif;\r\n    }<\/code><\/pre>\n
      Top menu font content:<\/strong><\/p>\n
      \/* Top menu font *\/\r\n    ul.top-menu,\r\n    #menu-overlay{\r\n        font-family: \"font-name\", sans-serif;\r\n    }<\/code><\/pre>\n
      Titles font:<\/strong><\/p>\n
      \/* Titles and titles alike font *\/\r\n    h1,h2,h3,h4,h5,h6,\r\n    h1 a,h2 a,h3 a,h4 a,h5 a, h6 a,\r\n    .page-title,\r\n    .widget .title{\r\n        font-family: \"font-name\", sans-serif;\r\n    }<\/code><\/pre>\n
      Text Logo font:<\/strong><\/p>\n
      \/* Text content font *\/\r\n    a.logo{\r\n        font-family: \"font-name\", sans-serif;\r\n    }<\/code><\/pre>\n
      Using Custom Font from font file<\/h3>\n
      There is no in theme build in support to use custom webfont that is provided from the file, but it is pretty easy to do it.<\/p>\n
      Every time you add custom webfont to any site, you have to do 3 things:<\/p>\n
        \n
      1. Add font files somewhere on your server<\/li>\n
      2. Link this font in CSS.<\/li>\n
      3. Use this font on desired elements of the layout.<\/li>\n<\/ol>\n
        There are numbers of ways to do it, but I will explain it with use of child theme, as it is the safest way in my opinion, if you want to be safe on theme updates.<\/p>\n
         <\/p>\n
        Process<\/h4>\n
          \n
        1. Install child theme<\/a> & activate it.<\/li>\n
        2. Get your webfont. As for this example, I will use the Lobster font from here<\/a>.<\/li>\n
        3. In child theme create font<\/strong> directory.<\/li>\n
        4. Upload there font files, in this example Lobster.eot<\/strong> & Lobster.ttf<\/strong>.\"Custom<\/li>\n
        5. With each webfont, there is usually style sheet file, in this case, stylesheet.css<\/strong>. We open it and copy its content to child themes style.css<\/strong>.<\/li>\n
        6. We have to provide a valid path to font files, so we add font\/<\/code> before every Lobster.eot<\/code> & Lobster.ttf<\/code>. It should look like this:\n
          \/* Top menu font *\/\r\n    @font-face {\r\n\tfont-family: 'Lobster';\r\n\tsrc: url('font\/Lobster.eot');\r\n\tsrc: url('font\/Lobster.eot?#iefix') format('embedded-opentype'),\r\n\t\t\t\t url('font\/Lobster.ttf') format('truetype');\r\n\tfont-weight: normal;\r\n\tfont-style: normal;\r\n}<\/code><\/pre>\n<\/li>\n
        7. Now we have to tell our theme for which elements we want to use new web font. In our example, we want to use it for the main menu. So in custom CSS<\/a>, we add following code:\n
          \/* Top menu font *\/\r\n    ul.top-menu,\r\n    #menu-overlay{\r\n        font-family: Lobster, sans-serif;\r\n    }<\/code><\/pre>\n<\/li>\n
        8. Save your changes, and now you should see your font.<\/li>\n<\/ol>\n
          Groups of elements<\/h4>\n
          You can use your web font for any elements, however, if you want to replace font for one of theme defined group of elements, then use one of below codes.<\/p>\n
          Let’s say you want to use font “Lobster”, then replace “font-name” with “Lobster” in below code examples.<\/p>\n
          Text content font:<\/strong><\/p>\n
          \/* Text content font *\/\r\n    html,input,select,textarea{\r\n        font-family: \"font-name\", sans-serif;\r\n    }<\/code><\/pre>\n
          Top menu font content:<\/strong><\/p>\n
          \/* Top menu font *\/\r\n    ul.top-menu,\r\n    #menu-overlay{\r\n        font-family: \"font-name\", sans-serif;\r\n    }<\/code><\/pre>\n
          Titles font:<\/strong><\/p>\n
          \/* Titles and titles alike font *\/\r\n    h1,h2,h3,h4,h5,h6,\r\n    h1 a,h2 a,h3 a,h4 a,h5 a, h6 a,\r\n    .page-title,\r\n    .widget .title{\r\n        font-family: \"font-name\", sans-serif;\r\n    }<\/code><\/pre>\n
          Text Logo font:<\/strong><\/p>\n
          \/* Text content font *\/\r\n    a.logo{\r\n        font-family: \"font-name\", sans-serif;\r\n    }<\/code><\/pre>\n
          Information<\/h3>\n
          It is good practice to not use too many different Web fonts as it slows loads time of your site.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":8670,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_tag":[],"class_list":["post-8682","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rifetheme.com\/help\/wp-json\/wp\/v2\/docs\/8682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rifetheme.com\/help\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/rifetheme.com\/help\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/rifetheme.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rifetheme.com\/help\/wp-json\/wp\/v2\/comments?post=8682"}],"version-history":[{"count":12,"href":"https:\/\/rifetheme.com\/help\/wp-json\/wp\/v2\/docs\/8682\/revisions"}],"predecessor-version":[{"id":9228,"href":"https:\/\/rifetheme.com\/help\/wp-json\/wp\/v2\/docs\/8682\/revisions\/9228"}],"up":[{"embeddable":true,"href":"https:\/\/rifetheme.com\/help\/wp-json\/wp\/v2\/docs\/8670"}],"next":[{"title":"Heading styles","link":"https:\/\/rifetheme.com\/help\/docs\/customizing-the-theme\/general-settings\/heading-styles\/","href":"https:\/\/rifetheme.com\/help\/wp-json\/wp\/v2\/docs\/8683"}],"prev":[{"title":"Hidden sidebar","link":"https:\/\/rifetheme.com\/help\/docs\/customizing-the-theme\/general-settings\/hidden-sidebar\/","href":"https:\/\/rifetheme.com\/help\/wp-json\/wp\/v2\/docs\/8681"}],"wp:attachment":[{"href":"https:\/\/rifetheme.com\/help\/wp-json\/wp\/v2\/media?parent=8682"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/rifetheme.com\/help\/wp-json\/wp\/v2\/doc_tag?post=8682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}