Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 19, 2015 at 10:11 pm #399286
    Nomodic

    Hey there, I know this has been a known issue in the past but despite trying various fixes (editing the .htaccess file, changing up the font face code, clearing cache, etc) my custom fonts do not show up in Firefox, Internet Explorer or Chrome but work great in Safari.

    Could it be because I’m developing the new Enfold landing page in a subdirectory of the main site perhaps? I wasn’t sure if anyone has come up with a reliable solution; any help would be greatly appreciated!

    Current font face codes below (website removed):

    @font-face {
    font-family: ‘AvenirNextLTPro-Medium’;
    src: url(‘/fonts/2D45D700.eot’);
    src: url(‘/fonts/2D45D700.eot?#iefix’) format(’embedded-opentype’);
    src: url(‘/fonts/2D45D700.woff2’) format(‘woff2’);
    src: url(‘/fonts/2D45D700.woff’) format(‘woff’);
    src: url(‘/fonts/2D45D700.ttf’) format(‘truetype’);
    src: url(‘/fonts/2D45D700.svg#AvenirNextLTPro-Medium’) format(‘svg’);
    }

    @font-face {
    font-family: ‘AvenirNextLTPro-Demi’;
    src: url(‘/fonts/2D45D710.eot’);
    src: url(‘/fonts/2D45D710.eot?#iefix’) format(’embedded-opentype’);
    src: url(‘/fonts/2D45D710.woff2’) format(‘woff2’);
    src: url(‘/fonts/2D45D710.woff’) format(‘woff’);
    src: url(‘/fonts/2D45D710.ttf’) format(‘truetype’);
    src: url(‘/fonts/2D45D710.svg#AvenirNextLTPro-Demi’) format(‘svg’);
    }

    • This topic was modified 9 years, 9 months ago by Nomodic.
    February 20, 2015 at 8:18 am #399482
    Rikard

    Hey Nomodic!

    Did you verify that the URL for the font is correct? It could help to include the full URL, or at least to make sure it’s not your problem.

    Best regards,
    Rikard

    February 20, 2015 at 8:22 pm #399857
    Nomodic
    This reply has been marked as private.
    February 23, 2015 at 3:37 am #400355
    Andy

    Hey!

    I checked on Chrome and Safari and the fonts are the same. They do look differently, but that’s normal browser behavior. Every system and every browser has its own font rendering engine.

    Best regards,
    Andy

    February 23, 2015 at 4:05 am #400362
    Nomodic
    This reply has been marked as private.
    February 23, 2015 at 10:57 pm #401062
    Nomodic

    Just an update here, I’ve been changing up the font face URLs, font file locations, etc…still not working. Here is my current info:

    The following is in my custom.css file (font file names are correct):

    @font-face {
    font-family: ‘AvenirNextLTPro-Medium’;
    src: url(‘fonts/2D45D700.eot’);
    src: url(‘fonts/2D45D700.eot?#iefix’) format(’embedded-opentype’);
    src: url(‘fonts/2D45D700.woff2’) format(‘woff2’);
    src: url(‘fonts/2D45D700.woff’) format(‘woff’);
    src: url(‘fonts/2D45D700.ttf’) format(‘truetype’);
    src: url(‘fonts/2D45D700.svg#AvenirNextLTPro-Medium’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: ‘AvenirNextLTPro-Demi’;
    src: url(‘fonts/2D45D710.eot’);
    src: url(‘fonts/2D45D710.eot?#iefix’) format(’embedded-opentype’);
    src: url(‘fonts/2D45D710.woff2’) format(‘woff2’);
    src: url(‘fonts/2D45D710.woff’) format(‘woff’);
    src: url(‘fonts/2D45D710.ttf’) format(‘truetype’);
    src: url(‘fonts/2D45D710.svg#AvenirNextLTPro-Demi’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    I currently have my fonts in three places on the back end:
    – in the main webroot folder (in a folder called “fonts”)
    – in the enfold theme folder (in a folder called “fonts”) – the WordPress files are in a subfolder of my webfoot folder called “new” as I’m building the new landing page in a subdirectory of my main site
    – in the enfold/css folder (in a folder called “fonts”)

    And finally, I have the following code in Quick CSS:

    h3, h4, h5 {
    font-family: ‘AvenirNextLTPro-Medium’, ‘Helvetica’, ‘Arial’, sans-serif !important;
    font-weight: normal;
    font-style: normal;
    }

    h1, h2 {
    font-family: ‘AvenirNextLTPro-Demi’, ‘Helvetica’, ‘Arial’, sans-serif !important;
    font-weight: bold;
    font-style: normal;
    }

    The Avenir font is showing up fine in Safari on my computer only. All other browsers and Safari on other computers default to Helvetica/Arial. I’m hoping an answer can be extracted from this – again, thanks for all the help!

    February 26, 2015 at 4:47 am #402439
    Andy

    Hi!

    Are you sure you uploaded your fonts correctly to you server using FTP?

    Did you use the font face generator?: http://www.fontsquirrel.com/tools/webfont-generator

    Then upload the font files into the enfold/css folder and add your font face code to custom.css. Afterwards you can use the font-family attribute to apply the font to any html element: http://www.css3.info/preview/web-fonts-with-font-face/

    Have a look at this link for an example how to implement it: https://css-tricks.com/snippets/css/using-font-face/
    And here is a step by step instruction: http://justcreative.com/2013/01/22/how-to-use-custom-fonts-with-font-face-on-wordpress/

    Hope this helps.

    Regards,
    Andy

    February 26, 2015 at 11:00 pm #403052
    Nomodic

    Thanks Andy. I referred back to MyFonts.com (where I bought the fonts initially) and got it to work finally.

    I added their included “MyFontsWebfontsKit.css” file into the main CSS folder, edited it to show the absolute path to the font files, and added a separate code into both custom.css and header.php:

    <link rel=”stylesheet” type=”text/css” href=”http://www.mywebsite.com/wp-content/themes/enfold/css/MyFontsWebfontsKit.css&#8221; />

    I didn’t need any of the font face codes, etc as described by many other sources. Odd. But it works now!

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Custom fonts working only in Safari’ is closed to new replies.