Fonts, Styles, Colors

Unite Theme
1

Hi Aigars!

I would like to change the fonts for the style. I tried looking the code up in your stylesheet.
Like for the Pagetitle und Description I would like to use a Googlefont.
And change font und size for headings and text. And I am not getting into it. XD

I created a childtheme. There I added this:

@import url(http://fonts.googleapis.com/css?family=Frijole);
.site-title {
	font-family: Frijole, Verdana, Arial, sans-serif;

And nothing happend.

Could you provide the code for the different textstyles? That would be much appreciated.

Greetings

2

Oh and how do I remove or reduce the spacing betweet the title header lines? My titles always take more than one line and it looks somehow waste with so much space between them.

Thanks

3

Actually this is not the right way to call for Google Fonts in WordPress. You have to enqueue fonts like any other .css, .js or other external file.

Add this to your theme (preferably Child Theme if one is used) functions.php file:

/* Enqueue Google fonts */
add_action( 'wp_enqueue_scripts', 'add_google_fonts' );
function add_google_fonts() {
    wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Frijole', array(), 20140218 );
}

And then you can call your font like you already did before:

.site-title {
    font-family: Frijole, Verdana, Arial, sans-serif;
}

This should do the trick.

4

The most direct way of adding custom fonts in WordPress is by adding the fonts using CSS3 @font-face method. This method allows you to use any font that you like on your website.
The best place to upload the fonts is inside a new “fonts” folder in your theme or child theme‘s directory.

Once you have uploaded the font, you need to load the font in your theme’s stylesheet using CSS3 @font-face rule like this:

@font-face {

font-family : Arvo;

src : url (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);

font-weight : normal ;

}

Don’t forget to replace the font-family and URL with your own.

After that you can use that font anywhere in your theme’s stylesheet like this:

.h 1 site-title {

font-family : "Arvo" , Arial , sans-serif ;

}

Loading fonts directly using CSS3 @font-face is not always the best solution. If you are using a font from Google Fonts or Typekit, then it is best to serve the font directly from their server for optimal performance.

5

Thank you for sharing this info @johnbiden20 :slight_smile: