Docs

[onixbox]

Hi,

I have a custom font which I want to use for my headings.
It is this one: http://www.1001fonts.com/animals-are-like-people-font.html

I followed the steps explained in this topic:
https://community.theme.co/forums/topic/how-do-i-add-my-own-font-and-use-everywhere/#post-56415

But it kind f doesnt work at my website. Can you help?

[onixbox]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! Please follow this post: https://community.theme.co/forums/topic/menu-font-changes/page/2/#post-881256

Hope it helps, Cheers!

[onixbox]

Thanks for that!
And how can apply the installed font now for all headlines h1 to h5?

[Rupok]

Hi there,

Thanks for writing back. You can use apply the fonts for all heading tag with the below code :

h1, h2, h3, h4, h5, h6 {
    font-family: 'YourFontFamily', sans-serif !important;
}

Make sure to replace YourFontFamily with your font family name.

Hope this helps.

Cheers!

[archerthefox]

Hey there,

I’ve followed numerous instructions from numerous threads and I’m having trouble getting this working.

Here’s what I’ve got:

I’ve uploaded all the font files into a folder within the fonts folder.

I’ve added the below to my child theme stylesheet.

@font-face {
font-family: ‘Trade_Gothic_Bold’;
src: url(‘wp-content/themes/x/framework/fonts/trade_gothic_bold/Trade-Gothic-W01-Bold.eot’);
src: url(‘wp-content/themes/x/framework/fonts/trade_gothic_bold/Trade-Gothic-W01-Bold.eot?#iefix’) format(‘embedded-opentype’),
url(‘wp-content/themes/x/framework/fonts/trade_gothic_bold/4682ca648eccfdc15c03c7bb4f5f20fe.woff’) format(‘woff’),
url(‘wp-content/themes/x/framework/fonts/trade_gothic_bold/Trade-Gothic-W01-Bold.ttf’) format(‘truetype’),
url(‘wp-content/themes/x/framework/fonts/trade_gothic_bold/Trade-Gothic-W01-Bold.svg#Trade_Gothic_Bold’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

I’ve added this to custom CSS:

.x-topbar {
font-family : 'Trade_Gothic_Bold';
}

And I just can’t get it to show… I’ve also tried the above CSS with body and it’s not working. Please help! 🙂

Edited to add: I’ve got numerous fonts I want to add and allocate to different elements, for example nav bar & Headings I want as Trade Gothic Bold and body I want as Trade Gothic Light.

[Friech]

Hi There,

Thanks for writing in! You wrote above that you already followed numerous instructions, but have you already saw this one? https://community.theme.co/forums/topic/menu-font-changes/page/2/#post-881256

Then check it if its work with this plain HTML on a RAW content element.

<p style="font-family: 'name of your font';">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Or simple place this inline CSS on the element’s STYLE field.

font-family: 'name of your font';

Replace the name of your font phrase with the actual name of your font.

If it still does not work, please provide us with login credentials so we can take a closer look. To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Cheers!

[archerthefox]

This reply has been marked as private.

[Christopher]

Hi there,

Please update your code in child theme’s style.css to :

@font-face {
font-family: 'Trade_Gothic_Bold';
src: url('wp-content/themes/x/framework/fonts/trade_gothic_bold/Trade-Gothic-W01-Bold.eot');
src: url('wp-content/themes/x/framework/fonts/trade_gothic_bold/Trade-Gothic-W01-Bold.eot?#iefix') format('embedded-opentype'),
url('wp-content/themes/x/framework/fonts/trade_gothic_bold/4682ca648eccfdc15c03c7bb4f5f20fe.woff') format('woff'),
url('wp-content/themes/x/framework/fonts/trade_gothic_bold/Trade-Gothic-W01-Bold.ttf') format('truetype'),
url('wp-content/themes/x/framework/fonts/trade_gothic_bold/Trade-Gothic-W01-Bold.svg#Trade_Gothic_Bold') format('svg');
font-weight: normal;
font-style: normal;
}

Update your HTML code to :

<p style="font-family: 'Trade_Gothic_Bold';">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Hope it helps.

[archerthefox]

Thanks for that… I’ve updated and used the HTML code above but it’s not changing to the right font.

I’ve attached screen shot of what the font should look like (the heavy bold one) and how it’s appearing on the site.

[Rue Nel]

Hello There,

Sorry if it doesn’t work out.I would recommend that you transfer the font file to your child theme’s folder wp-content/themes/x-child/framework/fonts/ for easier management. To save you from hustle and any trouble, I went ahead and moved the font file to you child theme’s folder. I also edited your child theme’s style.css file and inserted this instead:

@font-face {
  font-family: 'Trade_Gothic_Bold';
  src: url('//www.your-domain.net.au/wp-content/themes/x-child/framework/fonts/trade_gothic_bold/Trade-Gothic-W01-Bold.eot');
  src: url('//www.your-domain.net.au/wp-content/themes/x-child/framework/fonts/trade_gothic_bold/Trade-Gothic-W01-Bold.eot?#iefix') format('embedded-opentype'),
  url('//www.your-domain.net.au/wp-content/themes/x-child/framework/fonts/trade_gothic_bold/4682ca648eccfdc15c03c7bb4f5f20fe.woff') format('woff'),
  url('//www.your-domain.net.au/wp-content/themes/x-child/framework/fonts/trade_gothic_bold/Trade-Gothic-W01-Bold.ttf') format('truetype'),
  url('//www.your-domain.net.au/wp-content/themes/x-child/framework/fonts/trade_gothic_bold/Trade-Gothic-W01-Bold.svg#Trade_Gothic_Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

You can now use the font family anywhere you want. And if ever you are using CloudFlare or may have installed a caching plugin like WordFence, W3 Total Cache or WP Super Cache, please keep in mind that after doing every updates or making any changes, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

[archerthefox]

That worked perfectly! Thank you!

Also, what is the CSS to change the NAV font to that font?

Thanks! 🙂

[Christopher]

Hi there,

Please add this :

.x-navbar .x-nav-wrap .x-nav > li > a {

    font-family: 'Trade_Gothic_Bold';
}

Hope it helps.

[archerthefox]

Worked like a charm!

Thank you! 🙂

[Christopher]

You’re welcome.

[Author]

Posts