Font Size, Font Change and Spacing

Mauer Themes Support Storyteller Font Size, Font Change and Spacing

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #4161
    lenn.thompson
    Participant

    I just downloaded and applied this theme. I appreciate the simplicity, but I’m wondering if there is a way to change the fonts.

    If you go to http://thecorkreport.us/

    The navigation font sizes are very small. Can that be bumped up?

    Can I change the font to something else? Maybe a Google Font?

    And the grey bar at the top — there looks like there is a weird return in there of some sort that is making it taller than it should be.

    Is there a way to reduce the white space in between sections too?

    #4169
    Paul
    Keymaster

    Hello Lenn,

    You can bump up the font size in the navigation by using the following CSS:

    .mauer-navbar {font-size: 1.25rem;}

    Just replace 1.25 with the value of your liking.

    You can add the above CSS code to your website by going to ‘Appearance’ > ‘Customize’ > ‘Additional CSS’. There please just paste the code and click ‘Publish’.

    As for using Google Fonts, although there is not an option for that out-of-the-box, you can still do it. I’m not including this option as all fonts are different in actual size, line height, etc. (e.g. Times and Helvetica are not physically the same size at 16px). So each time you change a font, the design actually needs tweaking.

    Anyway, you can use the code that Google Fonts provides, which, for example, looks something like this for Open Sans (see where I’m getting this — screenshot):

    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap');

    (See I’ve removed out the <style> and </style> at the beginning and at the end).

    You can insert that code in the same area I’ve mentioned (‘Appearance’ > ‘Customize’ > ‘Additional CSS’)

    And finally, introduce some rules, e.g. fo body text:

    body {font-family: 'Open Sans', sans-serif;}

    The grey bar at the top has extra spacing because of the Bunyad Shortcodes plugin, which adds its own style to Bootstrap’s .row class. You can check that by disabling the plugin and seeing if the issue persists (might need to clear browser cache to see the result). Anyway, you can override the override by using:

    .section-top-stripe .row {margin-bottom:0;}

    You can add this code the same way as the other CSS (see above).

    Regards,
    Paul

    • This reply was modified 3 weeks, 6 days ago by Paul.
    #4176
    lenn.thompson
    Participant

    Thanks for this, Paul. 2 out of the 3 things worked like a charm…

    But when I try to do the @import for the Google fonts, I’m getting an error that says “@import not allowed here”

    If you can help sort that through, that’d be great.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.