Custom Webfont

[x-nilo]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

@ Danilo

I see what you mean I selected it for the Menu and it looks Arial.
Where do you get that font? Can you provide an example where it’s implemented?

Thanks

-Rui

[x-nilo]

Hey Rui,

The original font file was an .otf
I made the web font files with fontsquirrel.com in .ttf .woff .woff2 .eot .svg

I uploaded the 5 font files in uploads/redux/custom-fonts/panton/panton-light

Do you have an idea?
Do I need a css-file?

[x-nilo]

The custom font seems to be recognized. (See at the screenshot.)
All fontfiles are shown with the icons.

But if I select I see the Arial.

Any help? Thanks for reply!

– Dan

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Hmm, seems that the font file css isn’t being loaded unfortunately. I’ll try and get through to redux for an update on the situation.

You’ll likely need to manually include the font through a plugin to load the files, maybe this one – https://wordpress.org/plugins/use-any-font/

– Ed

[x-nilo]

Hi Ed,

thanks for help.

Now it works with custom css, but ONLY on the “HOME” page.
On every “subpage” it doesn’t work and shows Times New Roman.

Why it only works on the “home” page? Any idea?

I used the following custom css code:

/* BODY FONT */
body,p {
    font-family: "panton-light" !important;
}

#logo h1 {
    font-family: "panton-extralight" !important;
}

/* HEADING FONT */
h1, .impact-text,.impact-text-large {
    font-family: "panton-light" !important;
}
h2,.blog-item .quote-excerpt {
    font-family: "panton-light" !important;
}
h3 {
    font-family: "panton-light" !important;
}
h4 {
    font-family: "panton-light" !important;
}
h5 {
    font-family: "panton-light" !important;
}
h6 {
    font-family: "panton-light" !important;
}
 
/* MENU FONT */
#main-nav, #header nav, #vertical-nav nav, .header-9#header-section #main-nav, #overlay-menu nav, #mobile-menu, #one-page-nav li .hover-caption {
    font-family: "panton-light" !important;
}

@font-face {
    font-family: 'panton-light';
    src: url('wp-content/uploads/redux/custom-fonts/panton/panton-light/panton-light-webfont.eot');
    src: url('wp-content/uploads/redux/custom-fonts/panton/panton-light/panton-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('wp-content/uploads/redux/custom-fonts/panton/panton-light/panton-light-webfont.woff2') format('woff2'),
         url('wp-content/uploads/redux/custom-fonts/panton/panton-light/panton-light-webfont.woff') format('woff'),
         url('wp-content/uploads/redux/custom-fonts/panton/panton-light/panton-light-webfont.ttf') format('truetype'),
         url('wp-content/uploads/redux/custom-fonts/panton/panton-light/panton-light-webfont.svg#panton-light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'panton-extralight';
    src: url('wp-content/uploads/redux/custom-fonts/panton/panton-extralight/panton-extralight-webfont.eot');
    src: url('wp-content/uploads/redux/custom-fonts/panton/panton-extralight/panton-extralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('wp-content/uploads/redux/custom-fonts/panton/panton-extralight/panton-extralight-webfont.woff2') format('woff2'),
         url('wp-content/uploads/redux/custom-fonts/panton/panton-extralight/panton-extralight-webfont.woff') format('woff'),
         url('wp-content/uploads/redux/custom-fonts/panton/panton-extralight/panton-extralight-webfont.ttf') format('truetype'),
         url('wp-content/uploads/redux/custom-fonts/panton/panton-extralight/panton-extralight-webfont.svg#panton-extralight') format('svg');
    font-weight: 200;
    font-style: normal;
}

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

try to replace your relative path by a full path, maybe that can work.
Just a hint.

-Rui

[x-nilo]

Hey Rui,

wonderful!!! Now it works fine :))))
Thanks!

-Dan

[Kyle – SUPPORT]

Great 🙂 Thanks Rui

– Kyle

[Swift Ideas – Ed]

Hey @x-nilo

Believe it or not, I may finally have a fixed custom font panel ready to go – just wondered if you would like to test it?

– Ed

[x-nilo]

Hi Ed!!

Hard to believe!… yeahh!!! You are great!!
Yes of course, I would like to test it…
What should I do?

Thanks!

– Dan

[Swift Ideas – Ed]

Great. Here is the extension zip – http://d.pr/f/1kmOz/Uk3xjrAn

Download, unzip, and then replace the folder in /includes/option-extensions/extensions/

Let us know!

– Ed

[gehrkensit]

Very cool to see this!

[Kyle – SUPPORT]

No problem, thanks Ed

[x-nilo]

Hi Ed, thanks!

Just replaced the folder…
After I see the message that I should check the uploads folder permissions. –> See screenshot 1
I have checked it. Now the uploads folder has 755.

I tried to add a font… Its working for a while… But after I get an error. Can not convert the font… –> See screenshot 2

Hmmm

Have you already tested?

– Dan

Attachments:

You must be logged in to view attached files.