Changing Fonts via Custom CSS

This topic has 33 replies, 5 voices, and was last updated 8 years, 7 months ago by Andrew Misplon.

Tagged: custom css fonts

Author
Posts
May 17, 2016 at 3:30 pm #3515
Andrew Misplon
Keymaster
Thanks for your feedback 🙂
Try heading over to Settings > TypeKit Fonts > Custom CSS Rules and insert:
```
body, 
button, 
input, 
select, 
textarea {
	font-family: "proxima-nova", arial, sans-serif;
}

.entry-content h1,
.entry-content h2, 
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	font-family: "proxima-nova", arial, sans-serif;
}
```
That’ll make everything Proxima Nova. With these rules you can leave SiteOrigin widget’s font settings on the theme font setting.
Do you have any general use case for Museo? If you can perhaps send a link to your site and give me a use case of Museo on that page I’ll try narrow this down. You can use the Set as private reply checkbox below if you want to keep your site private.
May 25, 2016 at 6:33 pm #3529

Tricia
Participant
This reply has been marked as private.
May 25, 2016 at 6:57 pm #3530

Andrew Misplon
Keymaster
Certainly 🙂 If you have any follow-up questions, please, let us know. Chat further once your site is live. Cheers for now 🙂
June 28, 2016 at 9:09 pm #3992

Tricia
Participant
This reply has been marked as private.
July 19, 2016 at 11:59 am #4177

efficad
Participant
Hi Matt
I’m Leonor a beginner in wordpress (learned through tutorials). I’m using Ultra Premium theme. Could you please help me with my Font problem? I’d like to use everywhere in my site the Avenir book font. 1) How can I add it to the theme design and 2) in a way that it won’t be affected by updates?
Thank you in advanced
Leonor
July 19, 2016 at 12:02 pm #4178

Andrew Misplon
Keymaster
Hi Leonor
Thanks for reaching out. Avenir Book is a premium Adobe font. When I check MyFonts.com now I can only see a Desktop purchase option, I could be missing the web purchase option though. Do you have a web ready license for this font?
July 19, 2016 at 2:39 pm #4201

efficad
Participant
Opus! What’s a web license ?
July 19, 2016 at 4:32 pm #4233

Andrew Misplon
Keymaster
It’s a commercial font so even to use it on your desktop it needs to purchased. In addition there is usually another license for fonts to be used online, I’m not sure this font can be used online. An easier solution would be to use the closest Google font such as Muli or Museo Sans.
July 19, 2016 at 5:42 pm #4236

efficad
Participant
Thank you very much for your help!
July 19, 2016 at 5:44 pm #4237

Andrew Misplon
Keymaster
For sure 🙂 If you Google avenir book google font similar you’ll find various forum discussions where users suggest different alternatives that might work for you.
July 19, 2016 at 6:00 pm #4241

efficad
Participant
Thank you for your useful tips 😉
July 19, 2016 at 6:00 pm #4242

Andrew Misplon
Keymaster
For sure 🙂
July 20, 2016 at 6:46 pm #4268

Tricia
Participant
Hi Andrew,
I need to adjust the fonts for two pieces on my homepage: http://dev.cwpd.org
– Change the font for the five items in the Plan Your Park Experience panel (with the blue cloud background) to Montserrat (rather than Montserrat 700). (I created this using the SiteOrigin Features widget.)
– Change the font in the “Submit” button at the bottom of the page to Montserrat 700, to match the other buttons on the page. (I created this section using the SiteOrigin Contact Form.)
Do you have any suggestions on how to do this? Can I do it using Custom CSS?
Thanks!
Tricia
July 20, 2016 at 8:19 pm #4272
Andrew Misplon
Keymaster
Hi Tricia
Thanks for your continued support. Sure, let’s try:
1. Please, try in Custom CSS:
```
/* Features Widget */
.sow-features-list .sow-features-feature .textwidget > h5 {
    font-weight: 400 !important;
}
```
2. Custom CSS:
```
/* Forms */
input[type="submit"] {
    font-family: Montserrat !important;
    font-weight: 700 !important;
}
```
Please, let me know how this goes. Thanks.
July 21, 2016 at 8:02 pm #4273

Tricia
Participant
Perfect! Thanks Andrew!
Author
Posts