How to add custom fonts?

Can someone tell me how to add fonts that are not included in the theme please?

Hi @Aus-Digital-Media,

Thanks for writing in.

I will show you an article that shows a great way on how to add an external fonts or custom fonts.

Summary

https://xthemetips.com/adding-your-own-font-to-x/139/

Hope it helps.

Let us know how it goes.

Thanks.

Thanks but I cant see my custom fonts in my typography list. Please see the screenshots.

Hi There,

Custom fonts added via CSS is by default not available on typography list. To use it, we can assign on a class then add this class on specific element.

.custom-font{
  font-family: 'LayarBahtera Doomsday Light Con';
}

Add custom-font on the element class field.

Hope this helps.

So is it not possible to set the body and heading fonts once for the entire website?
Do I have to add this custom css to every element on the website as I go?
Also please explain “To use it, we can assign on a class then add this class” Sorry I dont know css. thats why I bought a drag and drop theme.

Hi there,

With the code that my colleague suggested you can add the Class of custom-font to the element and the font will change.

If you want to have the whole website having the font you will need to add the CSS code below:

body {
  font-family: 'LayarBahtera Doomsday Light Con' !important;
}

Thank you.

Thank you and how do apply the same to headings?

Hi there,

Please use:

body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'LayarBahtera Doomsday Light Con' !important;
}

Hope this helps.

Sorry I mean I want to have the headings in a different font. Please can you give me the code.

Does the pro version of this theme allow assigning custom fonts to the options to avoid using css?

Hi There,

If you need to have the body and headings in a different font, you can update the given CSS code to this:

/*this font is for content text*/
body {
	font-family: 'LayarBahtera Doomsday Light Con' !important;
}

/*this font is for headings*/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'Font Name' !important;
}

Replace the Font Name with the actual name of your font-family.

If you load the font through Typekit, then yes.

But if you load the font through CSS, then no. This is true for all themes because no themes will include a custom font, only Google Fonts.

Actually, if you already loaded your custom font through CSS, you can easily apply that to specific text/headline. You just need to declare a CLASS to Theme Options > CSS

e.g.

.myclass-layarbahtera {
	font-family: 'LayarBahtera Doomsday Light Con' !important;
}

You can have any class name, just make it short and easy to remember. Then to apply that class to an element, simply inspect the element and under the Customize tab you’ll see the CLASS field where you can add the CLASS that you declared. e.g. myclass-layarbahtera


Hope that shed some lights,
Cheers!

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