WordPress.org

Ready to get started?Download WordPress

Forums

Lobster
[resolved] Change font (11 posts)

  1. benjduff
    Member
    Posted 5 months ago #

    Hi wondering if I could change the Lobster font. thanks.

    awesome theme

  2. Andrew Nevins
    Volunteer Moderator
    Posted 5 months ago #

    To which font?

  3. ruphel
    Member
    Theme Author

    Posted 5 months ago #

    Benjduff

    You can change the Lobster font to a different Google font by going to .../wp-content/themes/lobster/inc/media.php and on line 56 simply enqueue a new font. For example the Merriweather font.

    Change from:

    wp_enqueue_style( 'google_fonts', 'http://fonts.googleapis.com/css?family=Lobster', false, null, 'all' );
    to,
    wp_enqueue_style( 'google_fonts', 'http://fonts.googleapis.com/css?family=Merriweather', false, null, 'all' );

    Then you'll need to change the CSS go to line 6419 in your style.dev CSS file and change to whatever font-family you want to use.

    From:
    font-family: Lobster;
    to,
    font-family: Merriweather;

    In order for the change to take effect you'll have to delete your style.css.

    Then rename your style.dev.css to style.css. For better page loading performance you can minify your CSS at CSS MInifier.

    I hope this helps!

    Again, just to clarify, make your CSS changes in your style.dev.css then rename it style.css. In order to do that you'll need to delete the original style.css file.

  4. benjduff
    Member
    Posted 5 months ago #

    Thanks!

    Also, can I change the star icon?

  5. benjduff
    Member
    Posted 5 months ago #

    oh, can i change the font to Holtwood One SC ?

  6. ruphel
    Member
    Theme Author

    Posted 5 months ago #

    Benjduff

    Go to:

    ....your/path/to/wp-content/themes/lobster/inc/theme-options.php
    on line: 39 you'll see:

    <i class="jumbo-icon icon-star-empty"></i>

    To change the 'icon-star-empty' to any other icon supported Font Awesome

    Example: If you want to replace the icon-star-empty with the Globe icon - 'icon-globe', then you would change line 39 of your lobster/inc/theme-options.php as below:

    <i class="jumbo-icon icon-globe"></i>

    You could also just delete line 39 to get rid of the icon altogether - it's all up to you!

    I'll mark this as resolved.

  7. benjduff
    Member
    Posted 5 months ago #

    thanks. planning to put my logo there. Thanks again!

  8. ruphel
    Member
    Theme Author

    Posted 5 months ago #

    Use CSS:

    font-family: 'Holtwood One SC', serif;

    Php in losbster/inc/media.php

    wp_enqueue_style( 'google_fonts', 'http://fonts.googleapis.com/css?family=Holtwood+One+SC', false, null, 'all' );

    No problem, I'll mark as resolved :)

  9. benjduff
    Member
    Posted 5 months ago #

    sorry. still not happening. what line in CSS do i change?

  10. ruphel
    Member
    Theme Author

    Posted 5 months ago #

    Sorry, Benjduff

    You'll need to change these also:

    line: 6461

    and

    line: 6465

    .jumbotron h1{
      color: #0088cc;
      font-family: Lobster;
    }
    .jumbotron {
      color: #222;
      font-family: Lobster;
    }

    That'll change the Jumbo Headlines, amd there is no Lobster font left after that!

  11. GioCo86
    Member
    Posted 4 months ago #

    If you want to use a font that is not present in google fonts, what should I do instead?

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.