Embed own font

Support
#1

Hello,
I want to use the font “Tstar” for my headlines. This is no Google font.
The body font should be “Courier Prime”.

I´ve created a child theme and copied both fonts in a “fonts” folder.
Then I wrote this code in the style.css-file:
/* courier-prime-regular - latin /
@font-face {
font-family: ‘Courier Prime’;
font-style: normal;
font-weight: 400;
src: url(’…/fonts/courier-prime-v1-latin-regular.eot’); / IE9 Compat Modes /
src: local(‘Courier Prime Regular’), local(‘CourierPrime-Regular’),
url(’…/fonts/courier-prime-v1-latin-regular.eot?#iefix’) format(‘embedded-opentype’), / IE6-IE8 /
url(’…/fonts/courier-prime-v1-latin-regular.woff2’) format(‘woff2’), / Super Modern Browsers /
url(’…/fonts/courier-prime-v1-latin-regular.woff’) format(‘woff’), / Modern Browsers /
url(’…/fonts/courier-prime-v1-latin-regular.ttf’) format(‘truetype’), / Safari, Android, iOS /
url(’…/fonts/courier-prime-v1-latin-regular.svg#CourierPrime’) format(‘svg’); / Legacy iOS */
}

/* Tstar /
@font-face {
font-family: ‘Tstar’;
font-style: normal;
font-weight: 400;
src: url(’…/fonts/tstar-v1-latin-regular.eot’); / IE9 Compat Modes /
src: local(‘Tstar Regular’), local(‘Tstar-Regular’),
url(’…/fonts/tstar-v1-latin-regular.eot?#iefix’) format(‘embedded-opentype’), / IE6-IE8 /
url(’…/fonts/tstar-v1-latin-regular.woff2’) format(‘woff2’), / Super Modern Browsers /
url(’…/fonts/tstar-v1-latin-regular.woff’) format(‘woff’), / Modern Browsers /
url(’…/fonts/tstar-v1-latin-regular.ttf’) format(‘truetype’), / Safari, Android, iOS /
url(’…/fonts/tstar-v1-latin-regular.svg#Tstar’) format(‘svg’); / Legacy iOS */
}

I wrote this code in the CSS of x-theme:
body {
font-family: “Courier Prime”!important;
}
h1, h2, h3, h4, h5, h6 {
font-family: “Tstar”!important;
}

But it doesn´t work. The headlines don´t show the font “Tstar”.
Could you help me please?

Thanks a lot in advance.

Best regards,
Christine

#2

Hi Christine,

Thank you for reaching out to us. Now there is an easy way to upload and use the custom fonts, please follow the tutorial here https://www.youtube.com/watch?v=xFSeRlrHfcc add custom fonts to your site.

Also take a look at our documentation on Font Manager here https://theme.co/docs/font-manager

Hope this helps!

#3

Hello,
I´ve created the custom font “Tstar” in the Font Manager.
But now I´ve can´t find the field in Cornerstone for changing the font.
So where can I change it?
Does the new custom font only work with Cornerstone?

Thanks a lot in advance.

Best regards,
Christine

#4

Hello Christine,

Thanks for updating in!

You will need to go to X > Theme Options > Typography > Body and Content and in X > Theme Options > Typography > Headings. Make sure to assign your new font.

And then in Cornerstone you should be able to assign it in the Text Format option. If you don’t see those options, you need to turn on the Advanced Mode by going to the Settings > Preferences > Advanced Mode

Hope this helps.

#5

Hello,
thanks a lot! Now it works.

Only the sidebar has still the wrong font.
Could you please tell me how I can change the font of the sidebar?

Best regards,
Christine

#6

Hello Christine,

To fix the sidebar fonts, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-sidebar .widget,
.x-sidebar .widget li a {
    font-family: "Courier"!important;
}

We would love to know if this has worked for you. Thank you.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.