[Marcooooo]

Hello !

I’m trying to get two different fonts in my website (www.spff.ch) :

1. title of the post, and title/name of the widgets (right column)
2. general texts (menu included)

Is it a way to do this as simply as possible?

Thanks for your help!

[Skandha]

@marcooooo: The font family option is not available in the free version of the theme. I suggest you to upgrade to pro. You can also check out the additional-features available in pro version of the theme.

Alternately you can also use additional CSS Code to change fonts.
Let me know what you would like to do.
Kind Regards,
Skandha

[Marcooooo]

Hello Skandha,

I think more about an additional CCS code to change this: it’s the only thing I need to modifiy and my job on this website will be done.

The changement of the font must be applied on :
– the main font (all texts and menu bar) : Century Gothic (or similar)
– the title of the posts : Shadow into light
– the title of the widgets : Shadow into light

I’m quite sure a CSS could easily do the job…

Thanks for your help…

Regards,

Marc

[Skandha]

@marcooooo: Go to => Appearance => Customize => Additional CSS and the following CSS Code.

To change font of text and menu bar

.menu, .entry-content, .entry-summary {
     font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}

To use Shadows into light font first you will need to create a child theme. If you do not to how to create a chlild theme you can use Generate Child Theme plugin. Then download the Shadows into light font and paste the font files into your child theme folder in fonts folder. Also add the following CSS Code to style.css in your child theme folder.

@font-face {
    font-family: Shadows;
    src: url(fonts/ShadowsIntoLight.ttf);
}

Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
To change font of post title

article .entry-title, .widget-title {
     font-family:Shadows;
}

Let me know if this works out.
Kind Regards,
Skandha

[Marcooooo]

Hello Skandha,

That’s just perfect! I just made a little adaptation to got also the same font in the menu bar (possible to have it bigger?)…

Have a nice day!

Kind regards,
Marc

[Skandha]

@marcooooo: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.menu li {
	font-size:17px;
}

You can change the font-size according to your requirement.
Let me know if this works out.
Kind Regards,
Skandha

[Marcooooo]

Hello,

Looks pretty great! Thanks again…

Best regards, and have a nice day!

Marc

[Skandha]

@marcooooo: Glad I was able to help you out. Have a good day! 🙂

Kind Regards,
Skandha

[Marcooooo]

Hello again,

Somebody notice the font in the widget is different as the main font. How can I correct this last point?

Thnaks and have a good evening…

Regards,

Marc

[Skandha]

@marcooooo: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#secondary {
    font-family:didact;
}

Let me know if this works out!
Kind Regards,
Skandha

[Marcooooo]

It works fine! Last but not least, is it also a way to change the font of the word “Menu” in the mobile view? The menu options are in the correct font, except this word…

Kind regards,

Marc

[Skandha]

@marcooooo: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.mobile-menu-text {
	font-family:Shadows;
}

Let me know if this works out!
Kind Regards,
Skandha

[Marcooooo]

Works fine! I just increase the height and it’s now exactly what I want!

Thanks for you professionnalism and have a nice day!

Best regards,

Marc

[Skandha]

@marcooooo: Thank you for your appreciation. You too have a nice day! 🙂

Kind Regards,
Skandha

[Marcooooo]

I just received an e-mail from a influent member of the spff…

Is it possible de reduce the space between the posts of the landing page?
As I guess they after that want to change the same detail on the widget part, can you also give me the code for this part?

Many many thanks…

Marc

[Skandha]

@marcooooo: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

article {
     margin-bottom:10px !important;
}

You can change the margin according to your requirement.

Let me know if this works out!
Kind Regards,
Skandha

[Marcooooo]

Hi !

Regarding these spaces :
– vertical spaces (left margin – post – space – widget – right margin) : seems to be ok, maybe a little bit wider should be better
– horizontal spaces (menu bar – 1st post – space – 2nd post – space…) : under the menu bar, same remark as above, following spaces are too wide

Is it a way to manage these spaces? I guess it’s something with the padding, but cannot find how to manage this…

I hope you can understand what I mean! Thanks a lot four your support in this last thing…

Best regards!

Marc

[Skandha]

@marcooooo: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
/* Makin the page wider (Horizontal space) */

#page {
    width:1288px;
}

I think after this the site looks good.
Let me know if any changes need to be made.
Kind Regards,
Skandha

[Marcooooo]

Hello !

Thanks for all the tips and tricks! As they are not ready with the content and it’s holiday time, I put again the maintenance mode.

If I need some additional modification, I’ll write you a new message!

Have a good time and a beautiful summer!

[Skandha]

@marcooooo: Glad I was able to help you out. Let me know if you have anymore issues. Have a good day! 🙂

Kind Regards,
Skandha

[Author]

Posts