How to customize Cronus fonts, spacing

Marketplace Forums Themes Cronus How to customize Cronus fonts, spacing

This topic contains 3 replies, has 2 voices, and was last updated by  mythemes 3 years, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #4017

    nilloc
    Member

    Sorry, last time I built a website it was by writing straight HTML and I haven’t kept up. I’m trying to figure out how to customize fonts and spacing in Cronus, specifically in the body. I’ve looked in the styles.css and elsewhere, but don’t see where they’re defined. Or is there a way to do it with the “Custom CSS” section of the Customization window?
    Thanks for your help.

    #4018

    mythemes
    Keymaster

    You can customize the font by using the custom css code and custom css option. Is need to inspect the elements ( google chrome browser) and overwrite the css code with yours rules. I can help with the css code just provide more details about the elements you want to customize.

    #4021

    nilloc
    Member

    Thanks for your help. I’d like to use the Roboto family of typefaces https://fonts.google.com/specimen/Roboto?selection.family=Roboto

    A few things I’d like to modify are
    – Change the main body type to Roboto Regular
    – Change the heading type to Roboto Bold
    – Reduce the line height (vertical spacing) in main body type
    – Reduce line height (vertical spacing) in lists

    Thanks again.

    #4023

    mythemes
    Keymaster

    1. Change the main body type to Roboto Regular

    Our free version of Cronus theme does not have support for google fonts plugin but you can use a custom solution.
    To use the custom solution please follow next steps:

    1. Install Easy Google Fonts Plugin
    2. Go to Settings › Google Fonts
    3. Add new controller eg: Body
    4. Add Css Selectors body, html
    5. go to Admin Dashboard › Typography › Theme Typography and customize your Body font option
    6. 2. Change the heading type to Roboto Bold

      to change the headings to Roboto bold you need to create a controller for each heading

      .tempo-hentry h1, .tempo-hentry h2, .tempo-hentry h3, .tempo-hentry h4, .tempo-hentry h5, .tempo-hentry h6

      Then edit settings from Customizer.

      Also you can make changes directly in the theme files (we do not recommend this because you will lose your changes on update):

      cronus/function.php line 87

      replace this $font = 'Montserrat:400,700'; with $font = 'Roboto';

      cronus/media/css/settings-google-font-1.css

      replace everywhere the font-family: Montserrat, serif; with font-family: Roboto, sans-serif;

      You have to know that we have full support for Easy Google Fonts Plugin with our premium solution that extends the core functionality of the theme. This make it easy to make changes to any Font Appearance and lots of many other just from the customizer without any knowledge of coding or extra work.

      Take a look at Zeon Plugin


      For next solution you can use custom css options:

      go to Admin Dashboard › Customizer › Others › Custom CSS – option “Custom CSS”
      or ( just from 4.7 WordPress version)
      Admin Dashboard › Customizer › Additional CSS

      3. Reduce the line height (vertical spacing) in main body type

      The body line height is set by default with normal:

      body, html{
          line-height: normal;
      }
      

      and also for the paragraphs the default line height is set with 38px:

      p {
          line-height: 38px;
      }
      

      so you can change the values and use a css code like this:

      body, html, p{
          line-height: 24px;
      }
      

      4. Reduce line height (vertical spacing) in lists

      see the topic ( this solution is also available for Cronus Theme ):
      http://mythem.es/forums/topic/custom-css-space-between-list-items/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

mayson.fe@mailxu.com