Help applying custom font to headline

Support
#1

I’m a little confused on how to apply the custom font to a headline. It seems like a lot of people ask about this, but the posted solutions vary quite a bit and none are working for me.

I’ve uploaded the .woff files for 2 fonts (Sling and Sling light) to my child/framework/fonts folder.

I added the @font-face info on my global CSS for each font.

I’d like my headlines to be Sling light.

Nothing I do seems to apply the Slinglight font. I’m not sure what to do next. Any ideas?

Thanks!
Beth

#2

Hello There,

Thanks for writing in!

Before your custom css will work, you must make sure that you have supplied the correct and exact font file location. It must be something like this:

@font-face {
    font-family: 'slinglight';
    src: url('http://example.com/folder/folder/folder/SlingLight-webfont.eot');
    src: url('http://example.com/folder/folder/folder/SlingLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://example.com/folder/folder/folder/SlingLight-webfont.woff2') format('woff2'),
         url('http://example.com/folder/folder/folder/SlingLight-webfont.woff') format('woff'),
         url('http://example.com/folder/folder/folder/SlingLight-webfont.ttf') format('truetype'),
         url('http://example.com/folder/folder/folder/SlingLight-webfont.svg#slinglight') format('svg');
    font-weight: normal;
    font-style: normal;
}

where in http://example.com/folder/folder/folder/ is the exact path where this font file is located in your server.

Please let us know if this works out for you.

#3

I think I figured out the path and have edited the global CSS. I’m using a subdomain while I build the site, so that’s why the first part looks weird.

Now what is the next step? Do I add CSS to the page or do I add something in the headline element’s customize area?

#4

Hello There,

You already have the correct css. The problem is the path of the font files. It is still incorrect.
Please check the link in the secure note. It is still not found.

Please check first if you have the correct path.

#5

My host suggested dropping part of the path, which didn’t work, either. I’m going to concede defeat on this and use a different font. Bummer.

Thanks for your time anyway!

#6

Hello There,

If you can give me your ftp details, I maybe able to find the font file path, get the correct one and resolve this issue in no time. In a secure note, please provide the following:

  • FTP Hostname
  • FTP username
  • FTP password

Thank you in advance.

#7

Please see secure note.

#8

Hi @bethw789,

It’s not working, my FTP client says

Error: Authentication failed. Error: Critical error: Could not connect to server

Please provide the correct one. Where did you upload your font files? I couldn’t guess it based on that FTP path and subdomain URL.

Thanks!

#9

See note for corrected password

The host buries the theme files within something called clickand builds. Follow the path I gave you to see the fonts. I can’t upload a screenshot on a secure note or I would.

#11

Hello There,

I was able to login and I have the correct path. Please check the secure note.

The problem is that you only uploaded the *.woff file. You need to upload the rest of the font files as well like the:

SlingLight-webfont.eot
SlingLight-webfont.eot
SlingLight-webfont.woff2
SlingLight-webfont.ttf
SlingLight-webfont.svg

Please let us know how it goes.

#12

Progress! I uploaded everything except the .woff2 file, which wasn’t in the folder, and edited the global CSS.

(It turns out that I hadn’t checked all of the boxes before downloading the font from the website, so that’s why the others were missing.)

Do I customize the element or add CSS to the page? Neither seems to affect the headline on the page in question (see first secure note).

#13

Hello There,

Please update your custom css:

h1, h2 .h1, .h2 {
  font-family: 'slinglight', serif !important;
}

Hope this helps.

#14

Perfecto! (I had a semi after serif)

You are my favorite person right now!!!

Thank you!
-Beth

#15

Hey Beth,

You’re most welcome!
Thanks for letting us know that it has worked for you.

Regards.

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.