› ›

How to replace the default fonts of BusiProf Pro?

steven_lidisteven_lidi
in Busiprof
I like to know if and how I can replace the default font the BusiProf Pro use, without a plugin, as I failed to find a good plugin for this job, especially the font those elements selected  in the attachment use?

menuFonts.png
2M
Tagged:
«1

Comments

  • steven_lidisteven_lidi
    just for your information,
    I added the following codes in the Custom CSS box under General Settings:

    body {

        font-family: "Butler", UbuntuMono, lato;

        text-transform: none;

    }

     

    h1, h2, h3, h4, h5, h6 {

        font-family: 'Butler Stencil', Ubuntu; lato;

        font-weight: 700;

       text-transform: none;

    }

  • imrazimraz
    Hi, @steven_lidi

    Please tell us, do you exactly want to replace the font of the entire site or just want to show up some sections of the site with different fonts.

    Thanks
  • steven_lidisteven_lidi
    I want to replace the font of the entire site if possible.
  • steven_lidisteven_lidi
    edited November 2018
    replacing the font of the entire site if possible is my basic need, and option to change fonts of some sections would be better.
  • imrazimraz
    Hi,

    You can use Easy Google Fonts plugin. It enables your site to set specific google font to the entire site and also can set some sections of the site with another font family.

    You can follow these below screenshot how to use:
  • steven_lidisteven_lidi
    what if I want to use my favorite font, and without any plugin?
  • steven_lidisteven_lidi
    actually, I think Google Fonts for WordPress plugin is better, but they don't support to upload my favorite font. would you please let me know firstly  how to replace the font of the entire website?
  • steven_lidisteven_lidi
    could you please revisit to this ticket and refer to the above? thanks. @imraz

  • imrazimraz
    Hi,

    To know how to replace the font of the entire website via your own uploaded fonts, for that you can take reference of this link:

    You can follow the same steps for any fonts to apply on your site via following the above link.

    Let me know again!

    Thanks
  • steven_lidisteven_lidi
    ok, I will check that and let you know.thanks. have a nice weekend anyway.
  • steven_lidisteven_lidi
    edited November 2018
    I added the codes as attached, why is it not working at www.linlead.com? @imraz
    thanks
    fontsCodeNotWorking.png
    171K
  • imrazimraz
    Replace your custom CSS as shown in above screenshot & use the below one instead of that:

                @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 Light';
                    src: url('wp-content/uploads/fonts/Butler-Light.woff2') format('woff2'),
                        url('wp-content/uploads/fonts/Butler-Light.woff') format('woff');
                    font-weight: 300;
                    font-style: normal;
                }

                * {
                    font-family: 'Butler Light', 'Ubuntu', 'lato' !important;
                }

    Let me know did it work!

    Thanks
  • steven_lidisteven_lidi
    put the codes you give to Customizing ▸ General settings  ▸ Custom CSS, right? the difference is you add the symbol '?
    alter natively, those code could be also put into the file named css.sheet in the BusiProf Pro Child folder?
    however,
    the box symbol seems lost due to changes, I guess those symbol are related to Font Awesome. How to tackle this ? @imraz
    tkanks

    boxSimbolsLost.png
    146K
  • imrazimraz
    Hi, @steven_lidi

    Just I have seen you have not placed the font files in the font's folder of the child theme, As steps described in the above link. Please, first place both the files woff, woff2 in the correct place.

    Create a folder with name fonts in the child theme and put both the font files in it, after then let me know, I again will share custom CSS with respect to that.
  • steven_lidisteven_lidi
    sorry, I may have misunderstood you here, but for your information, I decided to use Butler normal, not Light, but I both place Butler normal and Butler Light into the font folder. please kindly answer to my questions in my last reply respectively and advise further.
  • steven_lidisteven_lidi
    edited November 2018
    or, you meant those font files already come from your theme? you want me to download from the server, then put them into the font folder we created for the child theme? are these fonts are free for us to use for commercial purpose? 
    fontAwesometoDownload.png
    188K
  • steven_lidisteven_lidi
    besides, how can I make the menu and the section title on the hompage to appear in another font?@imraz
  • imrazimraz
    Ok the icons also are gone after applying like as you shared me this screenshot: http://prntscr.com/leju8n

    To overcome this, replace the CSS with the below one first & let me know:

                *:not(i) {
                    font-family: 'Butler Light', 'Ubuntu', 'lato' !important;
                }
  • steven_lidisteven_lidi
    replaced and work. or, can I download from the server the font files selected as attached, then put them into the font folder we created for the child theme? are these fonts are free for us to use for commercial purpose? 
    fontAwesometoDownload.png
    188K
  • imrazimraz
    Yes, you can download these files but not sure about these are under commercial or not.
  • steven_lidisteven_lidi
    these files are uploaded by your team, would you please kindly check for this? I will also check at my end.
    besides, how can I make the menu and the section title on the hompage to appear in another font?@imraz
  • imrazimraz
    edited November 2018
    Sorry! you can download & also can use... I was just editing the above comment but you replied very fast... U can use and even you can download it from it's site: https://fontawesome.com/free
  • steven_lidisteven_lidi
     how can I make the menu and the section title on the hompage to appear in another font?@imraz
  • steven_lidisteven_lidi
    edited November 2018
    how can I make the menu and the section title on the hompage to appear in another font?@imraz
  • imrazimraz
    edited November 2018
    For menu & section title:

    #menu-regular li a{
    font-family: 'Butler Light', 'Ubuntu', 'lato' !important;
    }
    section h1 {
    font-family: 'Butler Light', 'Ubuntu', 'lato' !important;
    }
  • steven_lidisteven_lidi
    ok, I will try that. 
    For the Font Awesome Font, I got it, for now, seems font awesome sustains 2 versions of their things, one for free, other PRO to charge for advanced usage, if I understand that correctly.
    I edited my last reply and re-state here on  the Font Awesome Font to clarify.
  • steven_lidisteven_lidi
    seems, the section tiles, such as Recent Project and Awesome Services are not changed by font display? @imraz
  • steven_lidisteven_lidi
    meanwhile.
     following your suggestion on Font Awesome Fonts, we can keep and continue usage the current fonts of them I obtain from purchase of your theme. 
    or, what if I like to use the following fonts as attached, to replace the old ones of Font Awesome Fonts you pre-installed there?
    fontAwesomeWebFontFree5.5.png
    212K
  • steven_lidisteven_lidi
    edited November 2018
    besides, 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 voice potential legal dispute. would you please advise how? thanks.@imraz
  • imrazimraz

    Our fonts are free, and you can use for commercial usage.
    To update Awesome's, you don't need to remove anything just add one more line of HTML in your header.php b/w <head></head> tag 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

    OR

    You can use the "Custom CSS and Javascript" plugin & add HTML in the plugin:
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

    Like as in this screenshot: http://prntscr.com/lekset

    Use new fonts like this: http://prntscr.com/lekwdj

    Let me know. Your query is derived @steven_lidi please create a new thread, let to end this one.

    Thanks
Sign In or Register to comment.