How to change Font on Website title?

Hello Team,

I would like to keep the Text logo and the tagline on my website (style 10) but I wish to change the font. Ideally, I would like to use a google font.

What to change, and what is the best way to procede? My website is available at this adress : http://www.regardnomade.com

Thanks.

Vincent.

Put this in your custom CSS and choose your font. You might need to google the proper font name to use below for the desired font.

.td-logo-text {
   font-family: "Open Sans", sans-serif !important;
}

.td-tagline-text {
   font-family: "Open Sans", sans-serif !important;
}

The !important may not be required, but doesn’t hurt anything to have it there to be sure your custom settings are used, instead of defaults.

Selecting a google font should work since it’s included in the theme, but you might have to make sure you use the chosen font in at least one spot on the Theme Fonts settings panel to get it loaded smoothly by the theme.

Thanks Slug Bite, I will try it…

I forgot to ask,

– How to remove the capital letters in the title and Tagline? I prefer to put some regular text…
– How to manage the font size without destroying everything?

– How to reduce the spaces between the title and the menus (on top and below the title)?

Thanks again.

Vincent.

.td-logo-text {
   font-family: "Open Sans", sans-serif !important;
   text-transform: none; /* Removes uppercase format */
   font-size: 1.2em; /* Can use em, rem, px, or pt units here, set to preference */
}

.td-tagline-text {
   font-family: "Open Sans", sans-serif !important;
   text-transform: none; /* Removes uppercase format */
   font-size: 1.2em; /* Can use em, rem, px, or pt units here, set to preference */
}

.td-header-text-logo {
   margin: 60px 10px 60px 30px !important;
   /* These are default margins for the logo wrapper. In order - TOP RIGHT BOTTOM LEFT */
   /* Reduce the values currently at 60px to tighten the header up more */
}

Don’t forget, if you change something and it doesn’t show up on the site, add !important before the semi-colon to override conflicting styles from the theme stylesheet.

If you run into something you don’t quite understand in the code I’ve given you, go to the W3 Schools CSS Reference and look up the item on left hand menu. That’s a master CSS reference and it’s simple enough for beginners to follow along well.

Hello Slug Bite and Alin,

It worked perfect! Slug, your link is howesome! I was able to adapt my title design a bit better because of it…

Thanks a lot for the great help !

Please have a look at the result on my page…

Vincent.

@Vincentb75 That looks great! I’m glad you found what you were looking for.

That site really is the ultimate resource for CSS3 (and others), and it’s official so you can trust it.