Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
Thanks!
Also, can I change the star icon?
oh, can i change the font to Holtwood One SC ?
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.
thanks. planning to put my logo there. Thanks again!
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 🙂
sorry. still not happening. what line in CSS do i change?
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!
If you want to use a font that is not present in google fonts, what should I do instead?
