Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • December 15, 2016 at 9:30 pm #725016
    Eagles1227

    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

    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

    I have tried adding the entire url but it still does not work, unfortunately. Any other suggestions?

    • This reply was modified 7 years, 11 months ago by Eagles1227.
    December 18, 2016 at 5:37 pm #725862
    Basilis

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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.