Change font of title and headers

  • Resolved chrisontour84

    (@chrisontour84)


    4 years, 5 months ago

    Hi there!

    I want to reactivate my old travel blog and am super rusty with my CSS skills haha.

    I would like to use the “Economica” font from Google fonts on the headline and maybe also the Title. How could I amend my already existing Child CSS in the best way?

    I have this already this code in the style.css, so would just need to add the right font family for Economica i guess and need to know who to change the header font / size as well.

    `#site-title {
    font-family: “Trebuchet MS”,Arial,Sans-Serif;
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
    text-shadow: #222 0 2px 2px;
    }

    #nav {
    display: inline;
    float: right;
    font-size: 11px;
    font-weight: bold;
    line-height: 15px;
    margin-top: 20px;
    text-transform: uppercase;
    }

    Thanks!

    Cheers,
    Chris

    The page I need help with: [log in to see the link]

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

  • You can either specify the font as font-family: Economica, sans-serif or add other fallbacks in between, like font-family: Economica,“Trebuchet MS”,Arial,Sans-Serif;. Depends on how specific you want to be with fallbacks.

    Add that same font-family statement for the other style you want to change. Add or change the font-size statement as you like.

    Thread Starter chrisontour84

    (@chrisontour84)

    Thanks! I tried this but it wouldnt work with both font-family: Economica, sans-serif; or the below second option

    #site-title {
    font-family: Economica,“Trebuchet MS”,Arial,Sans-Serif;
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
    text-shadow: #222 0 2px 2px;
    }

    Its not changing the font, reset my cache already to double check.

    any other idea?

    PS: I have also tried the following:

    – added the font using this code in my functions.php

    function custom_add_google_fonts() {
 wp_enqueue_style( 'custom-google-fonts', 'https://fonts.googleapis.com/css2?family=Economica&display=swap', false );
 }
 add_action( 'wp_enqueue_scripts', 'custom_add_google_fonts' );

    – changed the CSS to the following which is displayed on the google font page:

    font-family: 'Economica', sans-serif;

    Still not working though ??

    Cheers,
    Chris

    • This reply was modified 4 years, 5 months ago by chrisontour84.
    Thread Starter chrisontour84

    (@chrisontour84)

    nevermind, it worked now! maybe just a slight delay but now i can make changes in real time, cheers ??

    Ah, apologies, I thought you already had the font included.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change font of title and headers’ is closed to new replies.

Tags