Custom font added using font face not giving text preview.

  • Hello folks, I tried to add custom font in style.css using font-face method but font is not getting reflected in website.
    I have an ecommerce website for custom printing business(redundant link deleted), on the product page there people can select a font from dropdown and see its preview under the dropdown but even after adding the font is style.css the text preview is not appearing in font selected from dropdown. Please guide what to do get the desired result as I want to add multiple fonts which give text preview in those fonts.

    • This topic was modified 3 years, 3 months ago by kingav.
    • This topic was modified 3 years, 3 months ago by Jan Dembowski.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Did you set the path of fonts in funtion.php file, if not first you have to upload fonts file in your theme folder and then set path in funtion.php file.
    Here you can read more about how to add fonts in your WordPress webiste:https://www.hostinger.com/tutorials/how-to-add-custom-fonts-to-wordpress

    I hope it will work for you

    Thread Starter kingav

    (@kingav)

    Thanks for your reply, I already have reviewed your link provided, there is no thing of “function.php” mentioned on the link and also already tried the changes of adding code in “style.css” but nothing is working out.

    yes, you are right sorry for my above mistake. I thoroughly checked it again and I guess the problem is in fetching data, through inspect element I tried to put random text in HTML for different font style and it was working perfectly as you can see in screenshot:https://www.screencast.com/t/375vrmkdmT
    I will suggest you to check why isn’t fetching data or maybe you haven’t put the preview text
    Hope I’m right this time

    Thread Starter kingav

    (@kingav)

    There is no database to fetch data for fonts, we have uploaded the fonts in “theme/fonts/” and in style.css we have used font-face method with appropriate font path where it has to fetch or retrieve the font but isn’t working. Changing with HTML doesn’t validate it, the point is what to do with CSS to achieve the thing.

    your CSS is working fine the problem is that you haven’t put any “TEXT” in HTML to show as preview text
    The problem is in HTML not in CSS
    2021-08-13_02-41-11

    Thread Starter kingav

    (@kingav)

    Not working, and it is not feasible because we can’t hardcode every font in HTML. The thing is the user will enters the text in input field, font will change every time when a user selects a font from dropdown and text will change in HTML automatically and then the preview will be generated. You tried checking by replacing text in HTML by inspecting it but testing it this way is not useful and at our end it is not working. Please suggest another way if you know.

    • This reply was modified 3 years, 3 months ago by kingav.
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Custom font added using font face not giving text preview.’ is closed to new replies.