Home Forums ASE Support Change font in Novella

This topic is: resolved
Viewing 5 posts – 1 through 5 (of 5 total)
  • Author

    Posts

  • #5012

    Reply

    Greg Sewitz

    Participant

    How do I upload my own fonts to Novella?

    #5032

    Reply

    Jenny @ Aesop

    Keymaster

    Hi Greg.

    In order to change fonts in a theme, you’ll need to know some CSS or be comfortable using an inspector. If you’re not familiar with how to use CSS inspector in Chrome, it’s super easy to use and will make finding the css classes that you’ll need when you want to change the design. Here’s a great in-depth article about this: https://www.html5rocks.com/en/tutorials/developertools/part1/

    Also, this plugin helps makes working with web fonts in WordPress a little easier: https://wordpress.org/plugins/typecase/

    Hope that helps!

    #5055

    Reply

    Todd McKinney

    Participant

    Hi, Greg:

    I was working on the same matter a few weeks ago. It’s complicated. You need to utilize Google fonts to push the font to the end-user computer with edited CSS code like this:

    @import “http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic|Nixie One|Cutive”;

    Then find the CSS class you’re trying to change, and write the code in Appearance/Edit CSS, like this:

    .aesop-cover-title {
    font-family: ‘Ubuntu’, cursive;
    color: brown;
    font-size: 100%;
    font-weight: 700;
    letter-spacing: -100px;
    }

    .aesop-article-chapter {
    font-family: ‘Ubuntu’, cursive;
    color: grey;
    font-size: 200%;
    font-weight: 700;

    I still can’t find the class that is associated with the body text. If you’re using Firefox, use the Web Developer plug in, and set it to reveal ID classes and information.

    The Chapter component was finally unusable to me for a couple of reasons, so I made a chapter like this, editing in the ‘text’ rather than the ‘visual’ window:

    <span style=”color: #a81201; font-family: Ubuntu; font-size: 36px; font-weight: bold;”>CHAPTER 1</span>
    <span style=”font-family: Ubuntu; font-size: 24px; font-weight: bold;”>Birth on the Island of Zug</span>

    Anyway, getting what you need out of Novella (or any other theme, I guess) is a combination of taking what you like and using whatever other tools you might need (like plain ol’ html code) to get the job done.

    Good luck. Google fonts works well …

    -Todd

    #5130

    Reply

    Jenny @ Aesop

    Keymaster

    Thanks for your input Todd!

    Greg, please let us know if you still need assistance with this topic, otherwise we will mark it as resolved. Thanks!

    #5198

    Reply

    Todd McKinney

    Participant

    Hi, Greg:

    Here’s the additional code that allowed me to alter the body text:

    .novella-entry-content p {
    font-family: ‘Life Savers’, cursive;
    font-weight: 700;
    line-height: 1.6;
    }

    .novella-entry-title {
    font-family: ‘Life Savers’, cursive;
    font-size: 500%;
    font-weight: 800;
    }

    Keep chugging along,

    –T

Viewing 5 posts – 1 through 5 (of 5 total)
Reply To: Change font in Novella