Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #497951

    Hi guys,

    I have a site which references fonts located in the primary enfold/css folder (not Enfold child). The problem is whenever the theme updates, I have to manually upload these fonts. Is there a way to place these fonts in the child theme folder and reference them there, so I don’t have to upload the fonts each time the theme is uploaded?

    Thanks for your help!

    Dave

    #498034

    Hey atrixdave!

    You can use the fonts on any folder you want, even on your site root folder.
    How you are including them now?

    
    @font-face {
      font-family: 'MyWebFont';
      src: url('webfont.eot'); /* IE9 Compat Modes */
      src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
           url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
           url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
           url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

    You can change the font URL with what ever you think is better

    Regards,
    Basilis

    #498580

    Hi Basilis,

    Thanks for the reply. I’m only using a custom font for certain headers. I’ll show you how I have it configured currently and maybe there’s a better way?

    This is what I have in my Quick CSS:

    h1,h2,h3,h4,h5,h6 {font-family: trade_gothic_lt_stdbold;}
    .avia-content-slider .slide-entry-wrap {margin-bottom: 5px !important;}
    .modern-quote .av-special-heading-tag {font-family: trade_gothic_lt_stdbold;}
    #top .main_menu .menu li, #footer .widgettitle, .avia_widget_section .widgettitle {font-family: trade_gothic_lt_stdregular !important; text-transform:uppercase;}
    H3.av-special-heading-tag, #top .alternate_color.title_container .main-title a {font-family: trade_gothic_lt_stdregular;}

    And I have this in my custom.css file in the main Enfold folder (not Enfold Child):

    @font-face {
        font-family: 'trade_gothic_lt_stdregular';
        src: url('tradegothicltstd-webfont.eot');
        src: url('tradegothicltstd-webfont.eot?#iefix') format('embedded-opentype'),
             url('tradegothicltstd-webfont.woff') format('woff'),
             url('tradegothicltstd-webfont.ttf') format('truetype'),
             url('tradegothicltstd-webfont.svg#trade_gothic_lt_stdregular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    @font-face {
        font-family: 'trade_gothic_lt_stdbold';
        src: url('tradegothicltstd-bd2-webfont.eot');
        src: url('tradegothicltstd-bd2-webfont.eot?#iefix') format('embedded-opentype'),
             url('tradegothicltstd-bd2-webfont.woff') format('woff'),
             url('tradegothicltstd-bd2-webfont.ttf') format('truetype'),
             url('tradegothicltstd-bd2-webfont.svg#trade_gothic_lt_stdbold') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }

    And I have those fonts uploaded to the css folder within the Enfold folder (not Enfold Child).

    Can I include the changes above into Enfold Child somehow so I don’t have to modify these each time I update the theme?

    Thank you for your help!

    Dave

    #498596

    Hey!

    Yes, you can add the CSS code of your choise to the style.css file of the Child Theme, and you will not need to update every time ;-)

    Regards,
    Basilis

    #500686

    Ok maybe you can help more because its not working…

    I now have this in my QuickCSS:

    /* -- FONT CHANGES -- */
    @font-face {
        font-family: 'trade_gothic_lt_stdregular';
        src: url('tradegothicltstd-webfont.eot');
        src: url('tradegothicltstd-webfont.eot?#iefix') format('embedded-opentype'),
             url('tradegothicltstd-webfont.woff') format('woff'),
             url('tradegothicltstd-webfont.ttf') format('truetype'),
             url('tradegothicltstd-webfont.svg#trade_gothic_lt_stdregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'trade_gothic_lt_stdbold';
        src: url('tradegothicltstd-bd2-webfont.eot');
        src: url('tradegothicltstd-bd2-webfont.eot?#iefix') format('embedded-opentype'),
             url('tradegothicltstd-bd2-webfont.woff') format('woff'),
             url('tradegothicltstd-bd2-webfont.ttf') format('truetype'),
             url('tradegothicltstd-bd2-webfont.svg#trade_gothic_lt_stdbold') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    h1,h2,h3,h4,h5,h6 {font-family: trade_gothic_lt_stdbold;}
    .avia-content-slider .slide-entry-wrap {margin-bottom: 5px !important;}
    .modern-quote .av-special-heading-tag {font-family: trade_gothic_lt_stdbold;}
    #top .main_menu .menu li, #footer .widgettitle, .avia_widget_section .widgettitle {font-family: trade_gothic_lt_stdregular !important; text-transform:uppercase;}
    H3.av-special-heading-tag, #top .alternate_color.title_container .main-title a {font-family: trade_gothic_lt_stdregular;}
    /* -- END FONT CHANGES -- */

    And I uploaded the fonts to the enfold-child folder.

    The fonts aren’t displaying correctly. Any ideas why?

    #500854

    Hi,

    Please try using the full URL to the files, for instance:

    src: url('http://yoursite.com/wp-content/themes/child-theme/font-folder/tradegothicltstd-webfont.eot');
    

    Best regards,
    Rikard

    #502988

    Woohoo looks like full URLs worked! Thank you!

    • This reply was modified 8 years, 6 months ago by atrixdave.
    #502998

    And now I try to update my live site and it doesn’t work…

    Its working on staging, not on live.

    This is my code in Quick CSS, and the fonts are in enfold-child/fonts:

    /* -- FONT CHANGES -- */
    @font-face {
        font-family: 'trade_gothic_lt_stdregular';
        src: url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-webfont.eot');
        src: url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-webfont.eot?#iefix') format('embedded-opentype'),
             url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-webfont.woff') format('woff'),
             url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-webfont.ttf') format('truetype'),
             url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-webfont.svg#trade_gothic_lt_stdregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'trade_gothic_lt_stdbold';
        src: url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-bd2-webfont.eot');
        src: url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-bd2-webfont.eot?#iefix') format('embedded-opentype'),
             url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-bd2-webfont.woff') format('woff'),
             url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-bd2-webfont.ttf') format('truetype'),
             url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-bd2-webfont.svg#trade_gothic_lt_stdbold') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    h1,h2,h3,h4,h5,h6 {font-family: trade_gothic_lt_stdbold !important;}
    .avia-content-slider .slide-entry-wrap {margin-bottom: 5px !important;}
    .modern-quote .av-special-heading-tag {font-family: trade_gothic_lt_stdbold;}
    #top .main_menu .menu li, #footer .widgettitle, .avia_widget_section .widgettitle {font-family: trade_gothic_lt_stdregular !important; text-transform:uppercase;}
    h3.av-special-heading-tag, #top .alternate_color.title_container .main-title a {font-family: trade_gothic_lt_stdregular;}
    /* -- END FONT CHANGES -- */

    Any ideas?

    • This reply was modified 8 years, 6 months ago by atrixdave.
    #503034

    Hey!

    Try use the full URL, add the domain to the font file.

    Regards,
    Basilis

    #503055

    Not working! When I add the @font-face code to the custom.css file found within the main Enfold/css folder, the font works…but not in QuickCSS.

    Any ideas?

    #503234

    Hey,

    Did you verify that you get to the actual file when going to http://yoursite.com/wp-content/themes/enfold-child/fonts/tradegothicltstd-webfont.eot for instance?

    Best regards,
    Rikard

    #503545

    Yes, when I go to that URL I download the font file.

    #503764

    Hi,

    Can you please create us a WordPress administrator account? post it here as a private reply.

    Regards,
    Josue

    #505109

    Hi Josue,

    Yes please use this login info and check it out.

    #505205

    Hey!

    @font-face isn’t working there because this rule needs to be placed at the start of the stylesheet in order to work (Quick CSS content is placed at the bottom in a dynamically generated stylesheet along with your Styling settings).

    What you can do is place a style tag in the head using the wp_head hook, add the following to the very end of your theme / child theme functions.php file:

    add_action('wp_head', function() {
    ?>
    <style>
    ....@font-face code here...
    </style>
    <?php
    });
    

    Cheers!
    Josue

    #505711

    Thanks Josue that works. You are the man!

    #505772

    You are welcome, glad to help :)

    Regards,
    Josue

Viewing 17 posts - 1 through 17 (of 17 total)
  • You must be logged in to reply to this topic.