How to add custom fonts – Themeco Community

How to add custom fonts

svennuum — Sat, 25 Apr 2015 14:34:42 +0000

Hello,

Great theme by the way, really loving it!

Just one question. I know how to add custom fonts, I used the code in custom CSS, but how can I make so that these fonts work in every broswer?

Thanks,
Sven

`@font-face {
font-family: ‘AlwaysTogether’;
src: url(‘http://boost.ee/fonts/alwaystogether.eot’);
src: url(‘http://boost.ee/fonts/alwaystogether.eot?#iefix’) format(’embedded-opentype’),
url(‘http://boost.ee/fonts/alwaystogether.woff’) format(‘woff’),
url(‘http://boost.ee/fonts/alwaystogether.ttf’) format(‘truetype’),
url(‘http://boost.ee/fonts/alwaystogether.svg#fontname’) format(‘svg’);
}

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

Reply To: How to add custom fonts

Rue Nel — Sat, 25 Apr 2015 23:09:29 +0000

Hello There,

Thanks for writing in!

We would highly suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once your child theme is setup, you create a fonts folder right in your child theme. The code above for the font is close enough so you can insert the code in your child theme’s style.css like this;

@font-face {
 font-family: "AlwaysTogether";
 src: url("fonts/alwaystogether.eot");
 src: url("fonts/alwaystogether.eot?#iefix") format("embedded-opentype"),
 url("fonts/alwaystogether.woff") format("woff"),
 url("fonts/alwaystogether.ttf") format("truetype"),
 url("fonts/alwaystogether.svg#fontname") format("svg");
}

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

If you will have this setup, “Alwaystogether” font will work on any browser.
Please let us know how it goes.

Reply To: How to add custom fonts

svennuum — Mon, 27 Apr 2015 12:16:15 +0000

Thanks, it workes in Safari and Chrome, but not in Mozilla.. maybe I missed something

And why it cuts of the top part? http://boost.ee

Reply To: How to add custom fonts

Paul R — Mon, 27 Apr 2015 12:42:05 +0000

Hi Sven,

Please make sure you have uploaded all your fonts files(.eot, .woff, .ttf, .svg) in wp-content/themes/x-child/fonts

Then try to use absolute path in your css code


@font-face {
 font-family: "AlwaysTogether";
 src: url("http://boost.ee/wp-content/themes/x-child/fonts/fonts/alwaystogether.eot");
 src: url("http://boost.ee/wp-content/themes/x-child/fonts/fonts/alwaystogether.eot?#iefix") format("embedded-opentype"),
 url("http://boost.ee/wp-content/themes/x-child/fonts/fonts/alwaystogether.woff") format("woff"),
 url("http://boost.ee/wp-content/themes/x-child/fonts/fonts/alwaystogether.ttf") format("truetype"),
 url("http://boost.ee/wp-content/themes/x-child/fonts/fonts/alwaystogether.svg#fontname") format("svg");
}

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

Upon checking, none of your font files exist.

http://boost.ee/wp-content/themes/x-child/fonts/alwaystogether.woff

You can try converting your font on this site http://www.font2web.com/

For more information please see – https://css-tricks.com/snippets/css/using-font-face/

Hope that helps.

Reply To: How to add custom fonts

Amma1 — Mon, 14 Mar 2016 01:52:35 +0000

Hi,

I have added the fonts, is it possible for them to be selectable in the customizer?

Reply To: How to add custom fonts

Rad — Mon, 14 Mar 2016 02:07:02 +0000

Hi there,

It’s not possible, there is no available integration for custom font. This type of custom fonts are manually added, hence, the styling should be manually applied too.

Thanks!