Support Offline : 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

Karen Dunne

More than a month 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.

Pavel

More than a month 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....

Karen Dunne

More than a month ago #Permalink
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

More than a month ago #Permalink
Thanks Pavel
---
Anyway happy ending :D

Karen Dunne

More than a month ago #Permalink
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

More than a month 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)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 119
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 70
Toufiq

Toufiq

Total Accepted Answers: 66
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 39
Ofi Khan

Ofi Khan

Total Accepted Answers: 39

121

Templates

315593

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