Having some problems with adding custom font to X Theme

Support
#1

Hi, I tried to add my custom font to my site, but I’ve failed.

The CSS code I added is

@font-face {
font-family: ‘Hanthem Script’;
src: url(’/wp-content/fonts/HanthemScript.eot’);
src: url(’/wp-content/fonts/HanthemScript.eot?#iefix’) format(‘embedded-opentype’),
url(’/wp-content/fonts/HanthemScript.woff’) format(‘woff’),
url(’/wp-content/fonts/HanthemScript.ttf’) format(‘truetype’),
url(’/wp-content/fonts/HanthemScript.svg#HanthemScript’) format(‘svg’);
}

site-logo {
font-family: ‘Hanthem Script’;
}

in the Global CSS form.

However, the font of site logo doesn’t change at all.

Can you explain me how to change the font of elements in X Theme?

#2

Hey @poppinparty,

The selector in your code is incorrect. You neither have a period or hash before the site-logo. If it’s a class put a period (.)and hash (#) for ID.

If you’re targeting the logo text, that is not the correct selector and you don’t need CSS to change its font family. You can use the Font Manager. For more details, please see https://theme.co/apex/forum/t/font-manager/101

First, upload setup your font in the Font Manager and then enable the Font Manager in Theme Options > Typography. You’ll then be able to use the custom font for the Logo Font in Theme Options > Header > Logo - Text.

Hope that helps.

#3

@christian_y I tried adding # in front of site-logo, but it still doesn’t work.

I can’t find why this doesn’t work at all. I definitely uploaded font files properly.

Do I have to disable font manager when I’m adding some codes related to fonts on Global CSS?

And, I also have some problems with uploading font files in the font manager.

I set fonts file can be uploaded through Mime Types setting.

And then, I just followed the steps I need to do for upload. (Check the images below plz.)

But when I finish upload and click the “Select font file” button, it doesn’t get added.

Did I miss something?

#4

Hey @poppinparty,

Would you mind giving us a screenshot of the site logo? If you’re targeting the logo text, I previously said that it’s not the correct selector and you don’t need to use CSS because you can use the Font Manager.

We also do not support the CSS method because there’s a native feature to edit it. If you wish to proceed with CSS, you need to hire a third-party developer because that is custom development which is outside the scope of our support.

Please see the screenshot below of the logo text I’m referring to. The proper selector to use for that is .x-brand.text and not site-logo.

removed

Regarding the upload issue, it looks like your server is not able to accept the font extensions. Please follow this alternative setup to upload the fonts to WordPress. Here’s the link: https://theme.co/apex/forum/t/install-google-font-lato-locally/50332/25?u=christian_y

Thanks.

#5

@christian_y CSS thing has been solved. Thanks a lot for that.

But I still have a issue importing font from media library.

I definitely uploaded the font files through FileZilla, and I added them to media library with the plug-in you introduced to me.

However, it is still unable to select fonts from media library.

Please check the screenshot I attached below.

And I’m really sorry but can you delete the screenshot that you attached in your post?

I don’t want my site address and title to be revealed to others.

Thanks :slight_smile:

#6

Hi Arisa,

I just tried it with the plugin and it works, would you mind providing your admin login credentials in the secure note?

I like to check it as well.

Thanks!

#7

Hi, @Rad :slight_smile:

That’s why I’m very curious on this issue.

I tried the exact thing I was told to.

Hope you can find the wrong thing.

Please don’t reveal my site name or address in the post.

Please let me know if you need anything more. Thanks for help :slight_smile:

#8

Hi @poppinparty,

I couldn’t find your website URL under your license page.

Would you mind providing us with your website URL as well?

Thank you.

#10

@thai Oh, sorry for that.

Please check the secure note! Thx a lot :smiley:

#11

Hi @poppinparty,

I can confirm that the solution with Add From Server plugin isn’t working on your server.

The font manager only uses the upload manager provided by Wordpress, all configuration is handled by Wordpress itself. the font manager only opens a popup where Wordpress handles the uploads and forwarded the resulting URL back to the font manager. And security is handled by host environment that’s why it has varying result from user to user.

Can you please setup a child theme?

Then add the following custom code to functions.php file locates in your child theme, after that check the font manager again:

add_filter('upload_mimes', 'add_custom_upload_mimes');
function add_custom_upload_mimes($existing_mimes) {
	$existing_mimes['otf'] = 'application/x-font-otf';
	$existing_mimes['woff'] = 'application/x-font-woff';
	$existing_mimes['ttf'] = 'application/x-font-ttf';
	$existing_mimes['svg'] = 'image/svg+xml';
	$existing_mimes['eot'] = 'application/vnd.ms-fontobject';
	return $existing_mimes;
}

Let us know how it goes!

#12

@thai Thanks for confirmation! I want to ask some questions.

Q1. Can I use the plug-in “WP Add Mime Types” instead of adding the custom code that you wrote to functions.php file? It’s okay to add the custom code directly to functions.php, but I’m just asking if this way could work.

Q2. I read the documetation. So child theme makes it easier for me to apply some CSS modifications even if I need to update the parent X Theme, and parent theme stays pure (or raw) theme itself, and modifications are made by child theme, right?

I’m gonna try to reset my site and apply child theme. Thanks for help! I’ll be waiting for your reply :slight_smile:

#13

Hi @poppinparty,

May we try both solutions? Because in the previous reply, I mentioned And security is handled by host environment that's why it has varying result from user to user.

That’s correct. I could see that you’ve applied the custom code under functions.php file locates in the parent theme so if you update the X theme, all your custom code will be gone.

Regards!

#14

@thai I just reset my Wordpress and install X Theme and the child theme totally clean.

And I added that custom code you mentioned but it is still unable to add fonts to Font Manager.

I’m really sorry but can you login to my site and check if there’s anything I need to fix?

Login credential that you used before is available.

Thanks :slight_smile:

#15

Hi Arisa,

I tried adding this in Theme Options > CSS and it worked

Kindly check in your end.

Thanks

#16

Hi @paul.r, Thanks for help :slight_smile:

However, I want to apply font to logo text not by Theme option > CSS.

So I want to apply through Font Manager on X Theme option.

And it is still unable to select the font file on Font Manager (Custom Font Add).

I really wonder why this thing occurs.

#17

Hello Arisa,

As long as your server will not allow you to upload the font files right in your Media > Add New uploader, you cannot add any of the custom fonts using the Font Manager. Please understand that the font manager is merely dependent to the files allowed that you can upload in your server.

Hope this explains it briefly.

#18

Hi, @RueNel.

I checked and confirmed that the font files can be successfully upload using Media > Add New uploader. It does exist after I upload that.

The problem is: when I try to click the Import Font Files button of Font Manager - Custom Fonts menu, the uploaded font doesn’t exist at all. Or if I click Select Files button and select the font that I want to upload, there is no font added at all.

All file permissions, owner and group settings are OK. Uploading definitely works.

#19

@thai @Rad

Hi, I reset my Wordpress and installed X theme and child theme correctly.

I checked and confirmed that the font files can be successfully upload using Media > Add New uploader. It does exist after I upload that.

The problem is: when I try to click the Import Font Files button of Font Manager - Custom Fonts menu, the uploaded font doesn’t exist at all. Or if I click Select Files button and select the font that I want to upload, there is no font added at all.

All file permissions, owner and group settings are OK. Uploading definitely works.

Can you find the mistake or error I need to modify to make font manager uploading work?

#20

Hello Arisa,

Please follow these step by step guide:

If still not working then this is way beyond our help. You might need to contact your hosting provider and ask further assistance so that you can upload font files to your site.

To solve the issue alternatively, you can follow @Paul.r’s suggestion.

#21

Hi, @RueNel .

I just cleared this issue with the post below.


After upload on ‘Upload Fonts’ window, it just showed like as if there is no font file selected, however, it was selected.

I clicked save button and was able to apply custom fonts in my logo text using Font Manager.

After upload and selection, it appears like there was no font file selected, but after I press save button, it was added precisely.

So now, I can use Font Manager perfectly.

Thanks a lot for all those staffs who helped me. :slight_smile: