Theme pro, custom font installation failed

Support
#1

Dear support, I have some problems with such easy thing as custom font installation.
I did as always with css - and nothing. Then I followed instructions from:

and to check if I do smoething wrong - from other resources like:
https://xthemetips.com/where-in-the-world-do-i-put-my-custom-css/182/


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

What is my problem.
I am adding global custom css with font description (font-face).
Then I am using it in pro editor, I have tried both ways - adding as a code when stylin text element in html editor and by adding custom css in custom options of element. the result was none.

#2

Hi There,

Upon checking your website, I could see that you have uploaded only the SVG font type:

https://i.imgur.com/KUfozNf.png

You should upload the eot, woff2, woff font types as well.

For more information, please take a look at this article: https://css-tricks.com/snippets/css/using-font-face/.

Hope it helps :slight_smile:

#3

Hi @thai, thank you for your answer.
This might be the reason why it doesn’t work, but I don’t know why :slight_smile:
I have uploaded all font files here: /public_html/autoinstalator/wordpress/wp-content/themes/pro-child so why svg are available, and other no?

#4

Hi There,

I am not exactly sure what does mean by Others no? You mean you have uploaded the other format but it now showing in your server?

Can you please confirm.

Thanks

#5

What I meant was I have uploaded all font files, they are in the same folder as svg, but it looks like they are not visible?

#6

Hi There,

Would you mind providing us with your FTP account so we can take a closer look?

Thank you.

#7

Details sent in note

#8

Hi There,

Thanks for the details!
I can see all the font file with 4 different formats is present on the server. SVG is looking different because of the file icon view.

Not sure if you are pointing to any different issue.

Thanks

#9

@basanta Ok, so we agreed that all files are present. Now, can you help me with custom css? @thai wrote that custom css is not working because files are missing and only svg is present. Right now we agreed that all files are present, so why css is not working?

#10

Hi There,

Thanks for the confirmation!

I can see you have written the folder name wrongly.

Your font files are inside Pro-child but you have mentioned x- child.
Please change the folder name and follow the steps in the provided tips above.

Thanks

1 Like
#11

@basanta thank you very, very much for help. I am owerworked, so I am starting to make easiest and most annoying errors, like that. Thank you very much for help.

#12

You’re most welcome!

#13

Ok, so I have still problems. Your suggestion (synthax error in css) was correct, but still - I have problems with text formatting.
I think that there might be some problems with style overwriting each other? I am trying to add some custom css, but the way how text looks like is defined by some other style - but I do not know where.

Are you able to add any text field with anything, lorem ipsum etc that would be formatted with custom css style? Esp with font that I have mentioned above?

page where you can add this is main-pl

#14

Hi again,

I created a test page with text element and added inline styling to the element and indeed it was being overwritten by the default CSS. I’ll add this to our issue tracker so developers can be aware of this issue, in the mean time you can add !important at the end of CSS rules. for example:

$el {
  font-family: 'dejavu_sanscondensed_oblique' !important;
  font-size: 18px !important;
  color: red !important;
  font-weight: bold !important;
}

Here is the page where I added the element with inline CSS

Hope this helps!

#15

@Nabeel thank you for your time. unfortunately effect of your work is not working. Font that is visible after styling with your css is not dejavu sans oblique. Compare effect of your styling to demo


#16

Hi There,

I did go ahead and resolve the issue, I can’t tell what was the issue though since I redo how the font is loaded, if you’re wondering how please read this post.

Now if you need to apply the font “dejavu sans condensed” to a text or headline, just add a CLASS dejavusanscondensed to it.

I moved all your font files in this directory /wp-content/themes/pro-child/framework/fonts/dejavusanscondensed

I also did write the @font-face statement on the child theme’s style.css file. You can remove the @font-face statement on the Theme Options > CSS since it would not work there (posible that this was the issue).

I see that you have multiple variants of this font, what I loaded is only the dejavu sans condensed so you need to do what I did for other variants.

Clear your browser’s cache if you dont see the changes.



Hope it helps,
Cheers!

1 Like
#17

Thank you so much for your time, efforts and provided solution.
Without you I wouldn’t know where to look for your solution and issues source.

Thank you!

#18

You’re more than welcome, glad we could help.

Cheers!

#19

@friech I am sorry that I am writing again, but problem unfortunately is not solved.
Font dejavu sans is not loading even after adding class created by you. Font that is loading is Lato.

Easy test - look at the shape of letter K - in dejavu lines are sharp, in lato they are bent. Look at test page created by you.

This is small detail, right now maybe, but I wanted to load more custom fonts and it looks like right now it is pointless.

#20

Hi @tfstudiopl

I’ve double checked that the fonts files are loaded correctly on your website, also I’ve created a test video screencast showing that the font loaded on your website is the same as “dejavu sans”, please check it out here:

Let me know if there is something I’m missing here?
Thanks.