Docs

[Tuna T]

Hi All,

Whats the best practice for adding a new font-family to the Theme Customizer?

Mike

[Darshana]

Hi there,

Thanks for writing in! Follow the steps described below to add any custom fonts to your theme using @font-face.

Step 1: First you need to convert the fonts (eg. TTF or OTF format) that you have to use with @font-face. Use one of the following tools: http://fontface.codeandmore.com or http://www.fontsquirrel.com/fontface/generator to generate the fonts.

Step 2: Download the generated zip and you should have the following font formats: .eot, .svg, .ttf and .woff. Upload those font files to your server (ie. create a ‘fonts’ under your root folder or ‘wp-content’ folder).

Step 3: Now you need to specify the font in your CSS. The CSS can be added via Customizer > Custom > CSS or creating custom.css file in theme folder:

@font-face {
    font-family: 'FontName';
    src: url('http://yoursite.com/fonts/fontname.eot');
    src: url('http://yoursite.com/fonts/fontname.eot?#iefix') format('embedded-opentype'),
        url('http://yoursite.com/fonts/fontname.woff') format('woff'),
        url('http://yoursite.com/fonts/fontname.ttf') format('truetype'),
        url('http://yoursite.com/fonts/fontname.svg#fontname') format('svg');
}

Now you may specify which elements to apply the custom font.

h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
    font-family: "FontName";
}

Hope that helps.

[Tuna T]

Hi Support. 🙂

We know we can do it via CSS, but we’d prefer to choose an option in the theme customizer. We want to add common web safe fonts like georgia or lucida grande to the theme customizer.

We put a new fonts.php in our child theme but that didnt work.

It would be awesome if there was a filter to do this.

Mike

[Friech]

Hi Mike,

Further customization from here would be getting into custom development, which is outside the scope of support we can offer. We certainly appreciate the feedback! This is something we can add to our list of feature requests.

Cheers!

[Tuna T]

It would be a great filter to have. 🙂

[Christian]

Thanks for your feedback Tuna. I’ll send this to our development team and they might include this in a future release.

[Chris in Tokyo]

This is fantastic! It was so easy to add a custom font. Thank you!

[Christian]

You’re welcome. We’re glad you liked it. 🙂

[hipneck]

I’d also love to see X get a button that allows you to upload the web font kit of your choice to the list so all the options are easy to use from Cornerstone, and not something you have to dive into coding to achieve.

[Christian]

Thanks for your feedback. I’ll pass that along as feature request to our development team. 🙂

[Curtis R]

I’d also love the ability to add custom font to customizer (I have some clients that want their own font thoughthe freedom to change fonts as well without me being around) – just thought I’d +1 the suggestion 🙂

[John Ezra]

Hi there,

Thanks for writing in and for showing interest. We will update our development team – thanks!

[caleb]

what text would I use to specify button elements to use the font that i’m uploading?

[Thai]

Hi @bigdealbranding,

You can try following CSS:

.x-btn {
font-family: "FontName";
}

Hope it helps.

[RotaryPowered]

Hi guys,

Firstly, I appreciate the support I’ve received it has been comprehensive and fast, thank you for that.

What are all the elements I need to emphasize within the entire web document where there would be text and how would they be “abbreviated” like: .x-btn ?

h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle, .x-btn {
font-family: “FontName”;
}

Do I need to comment out google fonts code?
https://community.theme.co//forums/topic/chinese-users-cant-access-my-site-need-to-remove-any-and-all-google-refrencing/

I’m still lost somewhere..
Can someone give me a short tutorial on what I do after I have my fonts in 5 different correct formats in a newly created folder under wp_content?

Kind Regards,
Mark

[Author]

Posts