Custom font in Pro

Support
#1

Hi there

I have a custom font, the code I inserted on the CSS child theme is:

@font-face {
font-family: ‘Otterly’;
src: url(‘http://ninaKpilo/fonts/Otterly_Adorable.eot’);
src: url(‘http://ninaKpilo/fonts/Otterly_Adorable.eot?#iefix’) format(‘embedded-opentype’),
url(‘http://ninaKpilo/fonts/otterly_adorable_webfont.woff’) format(‘woff’),
url(‘http://ninaKpilo/fonts/Otterly_Adorable.ttf’) format(‘truetype’),
url(‘http://ninaKpilo/fonts/Otterly_Adorable.svg#Otterly_Adorable’) format(‘svg’);
}

and is not working, am I doing something wrong?

And one other thing, I need to use this font on a custom footer created, how can I do that?

Please advice, thank you!!!

#2

Hi,

Your url is incorrect.

Please change code to this.

@font-face {
font-family: 'Otterly';
    src: url('http://ninakpilo.com/fonts/Otterly_Adorable.eot');
    src: url('http://ninakpilo.com/fonts/Otterly_Adorable.eot?#iefix') format('embedded-opentype'),
         url('http://ninakpilo.com/fonts/otterly_adorable_webfont.woff') format('woff'),
         url('http://ninakpilo.com/fonts/Otterly_Adorable.ttf') format('truetype'),
         url('http://ninakpilo.com/fonts/Otterly_Adorable.svg#Otterly_Adorable') format('svg');
}

Hope that helps

#3

Hi @paul.r

I’ve changed the given code and isn’t working :tired_face:

This is an annoying issue, can you recommend something else to make this work? I really don’t know if the font format is correct, my client just gave me a OTF font, and I’ve converted the file with an online font converter (fontsquirrel), will that be the real problem?

Thank you!!!

#4

Hi there,

I tried to check your site but there is a coming soon page active.

Would you mind providing the password on a Secure Note so that we can check it?

Thank you.

#5

Hi @Jade

Put password on secure note

Thank you!

#6

Hello There,

Thanks for providing the information. You have successfully imported the font in your site via the child theme’s style.css. It is not working because you still have to apply it to all the elements on the page. You may need to update the css code and use this:

@font-face {
  font-family: 'Otterly';
    src: url('//ninakpilo.com/fonts/Otterly_Adorable.eot');
    src: url('//ninakpilo.com/fonts/Otterly_Adorable.eot?#iefix') format('embedded-opentype'),
         url('//ninakpilo.com/fonts/otterly_adorable_webfont.woff') format('woff'),
         url('//ninakpilo.com/fonts/Otterly_Adorable.ttf') format('truetype'),
         url('//ninakpilo.com/fonts/Otterly_Adorable.svg#Otterly_Adorable') format('svg');
}

body, 
h1, h2, h3, h4, h5, h6,
p {
	font-family: 'Otterly' !important;
}

Hope this helps. Please let us know how it goes.

#7

Hello @RueNel

Thanks for the reply, I input the code given but it’s still not working, I opened the console and shows this warnings

Could this be something wrong with the font files?

Waiting for reply, thank you!!!

#8

UPDATE ON THIS ISSUE

The code just responds on mobile and it change ALL the site fonts, that’s not what I want, I need that font in specific headings built with the Custom Headline Element.

I think this is an issue that can’t be solved, for now I’ll use images instead of text for the headings I need, this is something that could be in your to do list for further updates.

Thank you all for the support on this!

#9

Hello There,

If you only want to apply the font in the custom headlines, you can make use of this code instead:


.h-custom-headline.h1, .h-custom-headline.h2, 
.h-custom-headline.h3, .h-custom-headline.h4, 
.h-custom-headline.h5, .h-custom-headline.h6, {
	font-family: 'Otterly' !important;
}

Please let us know how it goes.

#10

Hi @RueNel

The code given works fine on mobiles, but it doesn’t work in desktops

Any suggestion?

Thank you!

#11

Hi there

It seems that my font files were the problem, it’s fixed now!

Thank you!!!

#12

Thansk for letting us know!

Cheers!