Using Custom Font With Pagebuilder - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Using Custom Font With Pagebuilder

O

Ola

SP Page Builder 3 years ago

Hi!

I am working on a webpage with Pagebuilder where we gonna use a custom font, designed for this football team that the site is about.

This is what I done.

  • I have created a folder under the template folder called - fonts
  • I have uploaded the fonts "spurs_v1_004-webfont.woff" and "spurs_v1_004-webfont.woff2" in this folder

I have created a new page in PB and added this code in the custom.css in that page.

*@font-face { font-family: 'spursregular'; src: url('../fonts/spursv1004-webfont.woff2') format('woff2'), url('../fonts/spursv1004-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }

p { font-family: spursregular !important; }*

So. I was hoping that when I create a textblock (p) the font called "spursregular" should replace the original font. But it does not...

When I re-open the page there is only a white page all add-ons on the page are gone. Like something in the css of the page, crash the page and I need to start over again.

I am not expert in using custom fonts so I would be very happy for some help. -)

Kind regards Ola

0
Website
http://www.coachenevents.se
3 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 years ago #93029

Hi Ola,

Extra tip! Use full path to font file with https as well, it may help.

and made sure that you disabled Roboto font for body and uploaded font file, becuase I cannot find it. Too many mistakes you made :(

Watch video made by our user >> https://www.youtube.com/watch?v=VMfytsdxKHs

and video created by me long time ago, rules are still this same: https://www.youtube.com/embed/MfAIT8cMuv4

BTW

I added font code inside custom.css file at the end, but where is FONT file?

0
O
Ola
Accepted Answer
3 years ago #93034

Hi Paul!

You are always so helpful so I really dont want to bother you to much. I spent some hours to make this work. I also checked out the video. However I am not using a Google Font.

I have uploaded the fonts in a new folder on root level named "fonts"

  • spurs_v1_004-webfont.woff
  • spurs_v1_004-webfont.woff2

I have added this to my custom.css

@font-face { font-family: 'spursregular'; src: url('https://www.coachenevents.se/fonts/spurs_v1_004-webfont.woff2') format('woff2'), url('https://www.coachenevents.se/fonts/spurs_v1_004-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }

.thfc h1 { font-family: spursregular; font-size: 30px; }

I created a page in Pagebuilder with a textbox. I added this code:

<div class="spursregular"><h1>Testing New H1</h1></div>

But only makes blank page...

Any idea what is wrong?

Kind regards, Ola

0
Pavel
Pavel
Accepted Answer
3 years ago #93043

Hi. As far as I see, the font is connected and works. In any case, there are no problems from the CSS. If the font is not displayed as it should, then apparently the problem with the font itself.

Just a couple of tips.

The font should be connected at the very top of the css file (1).

If you want to assign font for the whole text on the site, assign it for Body (2).

Here is example:

If you have a different font for headlines, assign it separately for them.

0