Changing the Stargazer font

6 Replies ·

  1. Can you tell me please which file contains the path to the Google font(s)?

    Thank you very much!

  2. Justin Tadlock

    It’s located in `/inc/stargazer.php` in two places (once for the admin

    `wp_register_style( ‘stargazer-fonts’, ‘//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic|Open+Sans:300,400,600,700’ );
    `

    It’s also imported in `/css/editor-style.css`:

    `
    @import url( ‘//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic|Open+Sans:300,400,600,700’ );
    `

    You shouldn’t edit these files directly though. If you can tell me what you want to replace it with, we can do that via a child theme.

  3. Marcus Tibesar

    <link href='http://fonts.googleapis.com/css?family=Antic+Didone' rel='stylesheet' type='text/css'>

    Justin, I have created a child theme now. It’s almost ready except I’m not sure of the enque code that must be added to the child theme’s functions.php.

    I have created the /css and /inc child theme folders and copied over the editor-style.css and stargazer.php files.

  4. Justin Tadlock

    Stargazer has three different font “sets”, which are Primary (body copy), Secondary (secondary text), and Headlines (h1-h6). By default, the primary font is Droid Serif and the other two sets are Open Sans.

    So, to replace fonts I’d need to know what this new font is supposed to replace. Are you just looking to replace the headlines, for example? Or, are you looking to replace all fonts? What we do will depend entirely on the answer to this.

    Also, don’t copy `editor-style.css` and `stargazer.php` from the parent theme. Well, you can copy `editor-style.css` if you want, but delete any code from it.

  5. Marcus Tibesar

    Thanks Justin,

    Headlines – Antic+Didone

    Primary – Open Sans

    Secondary – Open Sans

    Thank you very much!

  6. Justin Tadlock

    In your child theme’s `functions.php` file, add this:

    `
    add_action( ‘wp_enqueue_scripts’, ‘my_enqueue_styles’ );

    function my_enqueue_styles() {

    wp_dequeue_style( ‘stargazer-fonts’ );

    wp_enqueue_style( ‘my-fonts’, ‘//fonts.googleapis.com/css?family=Antic+Didone|Open+Sans:300,400,600,700’ );
    }
    `

    Note, I didn’t specific the font styles and weights for `Antic+Didone`. You can grab that from Google fonts if you need something different.

    Now, in your child theme’s `style.css`, add this code:

    `

    /* ====== Primary Font ====== */

    .font-primary,
    body,
    input,
    textarea,
    .label-checkbox,
    .label-radio,
    .required,
    #site-description,
    #reply-title small {
    font-family: ‘Open Sans’, Arial, sans-serif;
    }

    /* ====== Secondary Font ====== */

    .font-secondary,
    dt,
    th,
    legend,
    label,
    input[type=”submit”],
    input[type=”reset”],
    input[type=”button”],
    button,
    select,
    option,
    .wp-caption-text,
    .gallery-caption,
    .mejs-controls,
    .wp-playlist-item-meta,
    .entry-byline,
    .entry-footer,
    .chat-author cite,
    .chat-author,
    .comment-meta,
    .menu,
    .breadcrumb-trail,
    .media-info .prep,
    .comment-reply-link,
    .comment-reply-login,
    .clean-my-archives .day,
    .whistle-title {
    font-family: ‘Open Sans’, Arial, sans-serif;
    }

    /* ====== Headlines Font ====== */

    .font-headlines,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    font-family: ‘Antic Didone’, Arial, sans-serif;
    }
    `

  7. Marcus Tibesar

    Works beautifully Justin.

    By the way I did remove the stargazer.php and editor-style.css files from my child theme.

    I hope this Post can help others should they wish to change Google fonts.

    Thank you very much! Most appreciated!