• lavapapercraft

    (@lavapapercraft)


    I am new to this so may be silly question… How can I match the fonts set by the theme to use on the rest of my site i.e body of text etc?

Viewing 3 replies - 1 through 3 (of 3 total)
  • CrouchingBruin

    (@crouchingbruin)

    The theme actually uses quite a bit more font families than normal. Here is a list of the rules which include the font-family property:

    /* The default font */
    body {
        font-family: 'PT Serif', Georgia, serif;
    }
    
    /* Font for the major headings */
    h1, h2, h3, h4, h5, h6 {
        font-family: "Raleway", Arial, sans-serif;
    }
    
    /* Font for the site title */
    .site-title {
        font-family: 'Niconne', cursive;
    }
    
    /* Font for the site description */
    .site-description {
        font-family: 'Raleway', sans-serif;
    }
    
    /* Font for the author name, post date, number of comments */
    .entry-meta {
        font-family: 'Raleway', sans-serif;
    }
    
    /* Font for the "Continue reading" link at the end of each post */
    .more-link {
        font-family: 'Raleway', sans-serif;
    }
    
    /* Font for the widget titles */
    .widget-title {
        font-family: 'Raleway', sans-serif;
    }
    
    /* Font for the widget titles, emphasized */
    .widget-title em {
        font-family: 'Niconne', cursive;
    }
    
    /* Font for text that's not supposed to be changed (pre-formatted) */
    pre {
      font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
    }

    So to change them, install a CSS plugin like Jetpack or Custom CSS Manager, copy & paste all of the above rules into custom CSS field, then change the value for font-family in each of the rules to match whatever font family that you decide on. For example, the default font-family is 'PT Serif', Georgia, serif, so if you want everything else to match that font family, change the values in all of the rules to match. The reason why you see multiple options in the value (three in this example), is that the browser will try to use the first font if it’s available on your user’s device. If it’s not, then it will try to use the second, and so on. So usually the last option is a very generic “web-safe” font that is virtually guaranteed to be available.

    gloriawrites

    (@gloriawrites)

    This is great, CrouchingBruin, very helpful.

    veronique1507

    (@veronique1507)

    I didn’t have the same question but this answer helped me answer my question as well. Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Theme Font For Rest Of Site’ is closed to new replies.