Yet Another CSS Font-Face Question - Support | Kriesi.at

Tagged: font

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
December 15, 2016 at 9:30 pm #725016
Eagles1227
Participant
Hi support,

I have tried over and over and over to get a custom font to work. I am using Avenir. I read through the forums and have checked out many sites that you have referenced. Here is what I have:
```
font-face {
  font-family: 'AvenirLTStdBook’;
  src: url(‘wp-content/fonts/AvenirLTStd-Book.eot’); /* IE9 Compat Modes */
  src: url('wp-content/fonts/AvenirLTStd-Book.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('wp-content/fonts/AvenirLTStd-Book.woff2’) format('woff2'), /* Super Modern Browsers */
       url('wp-content/fonts/AvenirLTStd-Book.woff’) format('woff'), /* Pretty Modern Browsers */
       url('wp-content/fonts/AvenirLTStd-Book.ttf’)  format('truetype'), /* Safari, Android, iOS */
       url('wp-content/fonts/AvenirLTStd-Book.svg#svgFontName') format('svg'); /* Legacy iOS */
}

p {
    font-family: AvenirLTStdBook, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: AvenirLTStdBook, sans-serif;
}
```
Am I doing something wrong?
December 16, 2016 at 9:45 am #725227

Rikard
Keymaster

Hey Eagles1227,

Did you try using the full URL for the font? And did you verify that the URL is correct?

Best regards,
Rikard

December 18, 2016 at 1:24 pm #725826
Eagles1227
Participant
I have tried adding the entire url but it still does not work, unfortunately. Any other suggestions?
- This reply was modified 8 years ago by Eagles1227.
December 18, 2016 at 5:37 pm #725862

Basilis
Inactive Moderator

Hi!

Fix the error with the font, so we can make sure it is uploaded and it works and then we can check why it is not visible.

Cheers!
Basilis

December 20, 2016 at 6:06 am #726416

Eagles1227
Participant

Thanks, Basilis. Unfortunately, Cloudflare has yet to figure out why I am getting a 522 Error ONLY on safari. However, the site does work on Chrome and Firefox. Could you please take a look using one of those browsers? Thanks!

December 20, 2016 at 4:06 pm #726607

Yigit
Keymaster

Hey!

Site currently does not work on Chrome and Firefox as well on my end. Can you please check it once again?

Regards,
Yigit

December 20, 2016 at 4:47 pm #726652

Eagles1227
Participant

The site has been fixed and can now be viewed – strange DNS issue. Hopefully we can get the font working!

December 23, 2016 at 1:20 am #727748

Nikko
Inactive Moderator

Hi,

I checked your site and it seems to be working properly though it’s not fetching the font, I can see that you have already declared it in your child theme’s style.css (in the link below) but it still doesn’t reflect. Can you give us ftp access? so we can check the files further.

Best regards,
Nikko

January 2, 2017 at 9:36 pm #728753

Eagles1227
Participant

Hi Nikko! Sorry for the late reply – the holidays got the best of me. I have provided the requested info. Thanks so much!

Tyler

January 3, 2017 at 6:11 am #728849

Ismael
Moderator

Hi,

It should be “@font-face”, not just “font-face”. We modified the code in the style.css file but the site is still loading the old version. Please purge the cache or disable the cdn.

Best regards,
Ismael

January 3, 2017 at 6:36 am #728855

Eagles1227
Participant

Thanks for the reply! Sorry, I’ve tried both and just forgot to change it back to @font-face. I have cleared my cache in both the WPengine user portal and also through WP-admin. (I don’t have a CDN) Still, it doesn’t seem to work, unfortunately. I’m really stuck on this!

January 3, 2017 at 11:55 am #728929
Nikko
Inactive Moderator
Hi,

Seems weird that it’s not reflecting any changes, if you look at your child theme’s style.css you will notice the font-family is using the right value:
```
font-family: 'AvenirLTStdBook';
```
But if you check on what the page is fetching (link below) you will notice it’s wrong:
```
font-family: 'AvenirLTStdBookâ€™;
```
Seems like that’s the reason that is preventing it. The ftp access isn’t working, please check.

Best regards,
Nikko
January 3, 2017 at 6:13 pm #729095

Eagles1227
Participant

Nikko,

Sorry, but you were looking at the “?ver=2” link, which is not right. As Ismael stated, he added the @ in front of font-face. I also checked the style file and it does not contain the added characters of “â€™” after “AvenirLTStdBook.” There must be something wrong on your end or you did not clear your cache. Also, the FTP does work since Ismael made a change to my style sheet.

Any other ideas?!?

January 4, 2017 at 8:45 am #729330
Ismael
Moderator
Hi,

I can see the issue that @Nikko is describing. Please compare the style.css in the backend and the loaded style.css file in the frontend.

Backend:
```
@font-face {
  font-family: 'AvenirLTStdBook';
  src: url('https://www.neighborlyre.com/wp-content/fonts/AvenirLTStd-Book.eot'); /* IE9 Compat Modes */
  src: url('https://www.neighborlyre.com/wp-content/fonts/AvenirLTStd-Book.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.neighborlyre.com/wp-content/fonts/AvenirLTStd-Book.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://www.neighborlyre.com/wp-content/fonts/AvenirLTStd-Book.woff') format('woff'), /* Pretty Modern Browsers */
       url('https://www.neighborlyre.com/wp-content/fonts/AvenirLTStd-Book.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('https://www.neighborlyre.com/wp-content/fonts/AvenirLTStd-Book.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body, body p {
    font-family: 'AvenirLTStdBook', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'AvenirLTStdBook', sans-serif !important;
}
```
Frontend:
```
font-face {
  font-family: 'AvenirLTStdBookâ€™;
  src: url('/wp-content/fonts/AvenirLTStd-Book.eot'); /* IE9 Compat Modes */
  src: url('/wp-content/fonts/AvenirLTStd-Book.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/fonts/AvenirLTStd-Book.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/fonts/AvenirLTStd-Book.woff') format('woff'), /* Pretty Modern Browsers */
       url('/wp-content/fonts/AvenirLTStd-Book.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/fonts/AvenirLTStd-Book.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body, body p {
    font-family: 'AvenirLTStdBook', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'AvenirLTStdBook', sans-serif !important;
}
```
It’s probably cached. Did you modify the .htaccess file? Please post the content of that file on pastebin.com.

Best regards,
Ismael
January 4, 2017 at 9:47 pm #729618

Eagles1227
Participant

Fixed. Took WPengine 4 hours to address the issue. Not sure what they did, but it had to have been pretty involved for it to take them that long. Thanks so much for your help!
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Yet Another CSS Font-Face Question’ is closed to new replies.