Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

using @font-face not rendering

Featured Lock Resolved Issue
Hi,

I placed a font (futura light) in the helix template font folder and added this to the CSS:
@font-face {
font-family: 'futuralight';
src: url('futura_light_bt-webfont.woff2') format('woff2'),
url('futura_light_bt-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Dev tools show that it's picking up the assignment but the font itself is not rendering.

Futura light is shown in the screenshot, and is nothing like what is rendering.

Are custom fonts supposed to live in the templates/shaper_helixultimate/fonts directory?

Thanks,

Karen

Attachments (4)

  • Screen Shot 2019-08-19 at 4.59.42 PM.png
    Screen Shot 2019-08-19 at 4.59.42 PM.png 71.5 KB
  • Screen Shot 2019-08-19 at 4.59.51 PM.png
    Screen Shot 2019-08-19 at 4.59.51 PM.png 66.2 KB
  • Screen Shot 2019-08-19 at 5.00.51 PM.png
    Screen Shot 2019-08-19 at 5.00.51 PM.png 230.7 KB
  • Screen Shot 2019-08-19 at 5.03.11 PM.png
    Screen Shot 2019-08-19 at 5.03.11 PM.png 251.1 KB

6 Answers

I apologize, I have found the issue. It was the web font generator that I used that did not generate the right set. I used a different tool, i.e. https://www.web-font-generator.com/, and that created the proper files.

Pavel

4 weeks ago #Permalink
I apologize, I have found the issue. It was the web font generator that I used that did not generate the right set. I used a different tool, i.e. https://www.web-font-generator.com/, and that created the proper files.


But this cannot work for you, even with another converter, since you specified the wrong font path.
It should have this path

...src: url('../fonts/futura_light_bt-webfont....
Hi Pavel,

Thank you for replying with that information. You were right! And I didn't know it because I was being fooled by the fact that I have Futura installed on my machine (I know better, and forgot).

Paul Frankowski - Staff

4 weeks ago #Permalink
Thanks Pavel
---
Anyway happy ending :D
Paul...Probably best that you deleted your comments for others not to see. But to the point, the search on custom font in Helix does not return the documentation you mentioned. See this screen record for the search: https://screencast-o-matic.com/watch/cqjY31tQoz

So it would be helpful to know where the "whole guide on how to use custom fonts in Helix Ultimate Documentation. Step by Step, also with video" lives.

Paul Frankowski - Staff

4 weeks ago #Permalink
Helix Framework >> FAQ & How To Do >> How to use a custom font(s)

0-0.png

Attachments (1)

  • 0-0.png
    0-0.png 24.3 KB


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 112
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 97
Toufiq

Toufiq

Total Accepted Answers: 89
FUTURECLIENT

FUTURECLIENT

Total Accepted Answers: 2
Kamruzzaman Alam

Kamruzzaman Alam

Total Accepted Answers: 2

115

Templates

295809

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us