Docs

[svennuum]

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”;
}

[Rue Nel]

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.

[svennuum]

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

[Paul R]

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.

[Amma1]

Hi,

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

[Rad]

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!

[Author]

Posts