› ›

Change default fonts for Editor of WordPress?

steven_lidisteven_lidi
in Busiprof
I wonder if you upload any other fonts besides Font Awesome Fonts?
I like to delete all fonts pre-installed by your theme, unless you let me know they are free for commercial usage, while I like to make the editor to use the fonts I selected  by default, therefore to avoid any potential legal dispute regarding IPR related to fonts. would you please advise how? thanks.@imraz
Tagged:

Comments

  • imrazimraz
    Hi, @steven_lidi

    We only have provided the free-licensed fonts with our PRO theme package. However, other than free font awesome paid fonts are also available but we have not given.

    So you don't need to worry about any legal dispute.

    Thanks
  • steven_lidisteven_lidi
    ok, thanks for this kind explanation. what if I like to update to use the latest version of Font Awesome Fonts and how to do? @imraz  thanks
  • imrazimraz
    edited November 2018
    Hi, @steven_lidi

    Firstly I would not recommend you to use latest font-awesome fonts with the theme. Because the way to apply font icon class now get changed with it's latest version release. Refer the link to know how the changes come with the latest version of font-awesome: https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4

    However, if you further want to apply it you can do, but I have not fully tested, may somewhere you could encounter with font issue. You can follow the below steps to apply font-awesome 5.5.0:

    1) Use the "Custom CSS and Javascript" plugin & add HTML  in the plugin via copying from the LINK like as in this screenshot: http://prntscr.com/lhq0f8 (This added the font-awesome 5.5.0)

    2) Now remove the old font-awesome:
    Use the code snippets plugin & add this code from the link:
    Or if don't want to use code snippets plugin just past the code at very last of the function.php file after edit it.

    Let me know did it work!

    Thanks
  • steven_lidisteven_lidi
    ok, I will think about it. thanks for your kind advice.
  • steven_lidisteven_lidi
    could you please Kindly check it as attached if it's right to use. @imraz  or shall I open another ticket?
    CustomCSS.png
    319K
  • steven_lidisteven_lidi
    and are these codes in Customizing ▸ General settings ▸ Custom CSS correct by the way? @imraz 
    @font-face {
        font-family: 'Butler Stencil';
        src: url('wpcontent/uploads/fonts/ButlerStencil.woff2') format('woff2'),
            url('wp-content/uploads/fonts/ButlerStencil.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
     @font-face {
        font-family: 'Butler';
        src: url('wp-content/uploads/fonts/Butler.woff2') format('woff2'),
            url('wp-content/uploads/fonts/Butler.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
       *:not(i) {
                    font-family: 'Butler', 'Ubuntu', 'lato' !important;
                }
    #menu-regular li a{
     font-family: 'Butler Stencil', 'Ubuntu', 'lato' !important;
    }
    h1, .navbar-header a {
     font-family: 'Butler Stenci', 'Ubuntu', 'lato' !important;
    }
  • imrazimraz
    Paste your code in the https://pastebin.com/ and share that generated link have that code. In the screenshot I could not able to copy the text.
  • steven_lidisteven_lidi
    how about this?@imraz 

     // footer custom script
    function busipof_custom_code_script()
    {
    ?>
    <script>
    jQuery(document).ready(function ( jQuery ) {
            jQuery('.page-template-service-template .section-title-mini .testi-nav').before("<div class='section-title'><h1 class='section-heading'>Testimonials to LinLead</h1><p>The learning experience that LinLead presents comes out alive from solid research and sharp insight from a full room of thought leader like them:</p></div>");
            jQuery('.page-template-service-template .service .busiprof-features-content').after("<div class='col-md-12 col-xs-12'><div class='btn-wrap'><a href='#' target='_blank'>More</a></div></div>");
    });

    jQuery(function($){
    $('.dpr-wrap').attr("id","respond");
    });
      
    </script>
    <?php    
    }
    add_action('wp_footer','busipof_custom_code_script');
  • imrazimraz
    Formate of Custom CSS for importing text font i.e. ButlerStencil.woff2 and Butler.wolff2 are correct but make sure about the 
    path... wp-content/uploads/fonts/ it should have both files of .woff2 or .woff format.

    Currently, your site only loads Butler.woff2 Fonts And not other fonts.

    Now another CSS to implement fonts even correct. However, in a previous discussion thread, you have said it does not as working as it should.

    If you share your site URL wp-login details ( [email protected] ) I could able to debug this issue. We occasionally need details to login to debug such issues. 
  • steven_lidisteven_lidi
    talk tomorrow, anyway. thanks.
  • steven_lidisteven_lidi
    I would like to take your advice since all fonts your theme is using are free for commercial usage as you suggested all the way, (I failed to open the file you advise as linked though), however,
    now,
    seems fontawesome doesn't provide symbolic for our site at www.linlead.com. would you please kindly check and advise again ?  @imraz 
  • imrazimraz
    What do you mean about symbolic in font awesome?
  • steven_lidisteven_lidi
    I meant the icons of font awesome were not showed, but it's normal now as I reuploaded the css folder of the original BusiProf Pro, guess it was due to my replacement with the new version of font awesome 5.5.
    however, now it's a new issue, why the menu fonts are not changed into Butler, according to the below codes in Custom CSS?@imraz 

    @font-face {
        font-family: 'Butler Stencil';
        src: url('wp-content/uploads/fonts/ButlerStencil.woff2') format('woff2'),
            url('wp-content/uploads/fonts/ButlerStencil.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
     @font-face {
        font-family: 'Butler';
        src: url('wp-content/uploads/fonts/Butler.woff2') format('woff2'),
            url('wp-content/uploads/fonts/Butler.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
       *:not(i) {
                    font-family: 'Ubuntu', 'Butler', 'lato' !important;
                }
    #menu-regular li a{
     font-family: 'Butler Stencil', 'Ubuntu',   'lato' !important;
    }
    h1, .navbar-header a {
     font-family: 'Ubuntu', 'Butler Stenci',  'lato' !important;
    }

  • imrazimraz
    The problem is:

    *:not(i){ ... }
    This applies the font Ubuntu to the whole elements, if not your site has Ubuntu then it goes for Butler and if again not then go for lato font. Here we set the font for whole elements but marked with !important that prevent CSS to overwrite by other CSS.

    Therefore while applying the font on #menu-regular li a does not work and also the same happens for h1, . navbar-header a

    For that to debug I was asking for your wp-login details.

    Now the solution to overcome this situation you need to edit your style.css file of the parent theme. What to need for editing is to remove all font-family: CSS for all the classes and elements. Then after the above CSS code would work with slite changes in terms of !important i.e.:

       *:not(i) {
                    font-family: 'Butler', 'lato';
                }
    #menu-regular li a{
     font-family: 'Butler Stencil', 'Ubuntu',   'lato' !important;
    }
    h1, .navbar-header a {
     font-family: 'Butler Stenci',  'lato' !important;
    }

    Please let me know if this makes sense to you!

    Thanks
  • steven_lidisteven_lidi
    thanks for the detailed suggestion. can we alternatively change style.css file of the Child theme to avoid direct changes to parent?
  • imrazimraz
    Hi, @steven_lidi

    Yes, it's possible.

    The discussion seems like a kind of learning class :) Generally, for such changes, we actually need wp-login details to give our support.

    Create a child theme and then share the code written in the function.php file of the child theme.  You can share the code using https://pastebin.com/

    Thanks
  • steven_lidisteven_lidi
    thanks for you help and teaching alongside,
     I think we better skip over this, as I don't want you to spend too much time on this and I like to save time on my end, as it's not easy to quickly learn.
    I changed the codes for the Style.css file as attached.
    but the Menu titles are not changed as expected into ButlerStencil or Ubuntu, as another attachment, it's still Monteserrat.
    Please check if they are ok?
    thanks @imraz 
    CodesChanged4StyleCSSFile.pdf
    235K
    MontserratNotReplaced.png
    975K
  • imrazimraz
    I have check fonts are applied for menu link, please see this screenshot: http://prntscr.com/lj23cl
  • steven_lidisteven_lidi
    edited November 2018
    so, those setting and change I made are correct? yes,I also use the code in the custom css area:
    .navbar-nav a {
     font-family: 'ButlerStencil', 'Ubuntu','lato'!important;
    }

    moreover, I found we can copy all of changes into the style.css under Child theme, it also works. why did you not advise earlier with this? any concern there?  @imraz 
  • steven_lidisteven_lidi
    as in this way it will take too much time to respond than directly changed in the parent theme?
     and, can we changed the color of the menu?
  • imrazimraz
    If you copied all the style rules from style.css of the parent theme to child theme, & have edited. Now deactivate the style.css of the parent theme.

    For that please share the code of function.php of the child theme. I re-edit it and share back to you.

    Or 

    if you can do manually then just edit the function.php file and remove the dependency like in this screenshot: https://prnt.sc/lj3brm
    And also add this code in the code snippet plugin ( or you can add this at very last of the function.php file of the child theme)
  • steven_lidisteven_lidi
    thanks for this instruction, but this may be a little bit difficult. can I just changed the style.css file under the parent theme, I guess this will be the simple move and the theme will respond more quickly? @imraz

  • imrazimraz
    edited November 2018
    Yes, you can but it needs to keep remember & need to keep one back up a copy of your original style.css file of the parent theme & also the edited style.css so you can place again after whenever you update the theme.
  • steven_lidisteven_lidi
    where can I change code for the font of the Menu titles as attached, though I have already got the font I need, I just want to change it from the code directly, AND
    more importantly,
     How can I chang the color of the Menu titles into green one this site currently uses?
    MontserratNotReplaced.png
    975K
  • steven_lidisteven_lidi
    see above for recent reply, please. @imraz
  • imrazimraz
    Hi, 

    Please use the custom CSS box, because the CSS rules about for menu is defined in a custom.css file which is placed in css/ folder of the parent theme. If you want, edit custom.css file. It's not in the style.css file.

    Please, @steven_lidi create a separate new ticket for your second query. Don't add up new queries in the same discussion thread.

    Hope your this query is now resolved!. Allow closing to this one first!

    Thanks
  • steven_lidisteven_lidi
    OK, got it, you may close it. thanks. Steven
This discussion has been closed.