Home Forums ASE Support Change font in Novella

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #5012
    Greg Sewitz
    Participant

    How do I upload my own fonts to Novella?

    #5032
    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
    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
    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
    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)
  • You must be logged in to reply to this topic.