This topic has 26 replies, 6 voices, and was last updated 7 years by Radu.

  • Author
  • #94457
     hideyuki
    Participant

    I am beginner of Kleo theme. (I lovei it)

    I would like to know how to register Japanese font,which is not in the list of font<-styling option<-theme option.

    For example, I would like to use this font for entire site.

    “style=”font-family: Meiryo UI”

    Anyone, please teach me hoew to do it. Thanks

    #94592
     Radu
    Moderator

    Hi,

    You can achieve that by loading the font resource directly to head via this function

    COPY CODE
    
    add_action('wp_head','Kleo_hook_font');
    
    function Kleo_hook_font() {
    
    $output="<link rel='stylesheet' href='http://linktomyfont.com/font.css' type='text/css' media='all' />";
    
    	echo $output;
    }
    

    Then add to css (wp-admin -> theme options -> general settings -> quick css)

    body,a,b,h1,h2,h3,h4,h5,h5 { font-family : ‘Meiryo UI’; }

    Cheers

    Radu

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #94720
     hideyuki
    Participant

    Thanks you! I solved it.
    I wrote add_function in functions.php in Kleo Child.

    #94884
     Radu
    Moderator

    You’re welcome,

    Also don’t forget to rate our theme on Themeforest and give it 5 stars 🙂

    http://themeforest.net/downloads/

    Best regards

    Radu

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #103250
     verenar
    Participant

    Hello,

    how can I add a ttf File? Is it the same syntax like the font.css in the example?

    Where do I have to put the code from the example?

    Greetings

    #103353
     Radu
    Moderator

    Hi,

    If you have only ttf file i suggest you to upload the ttf file here ( cross browser ): http://www.fontsquirrel.com/tools/webfont-generator and then download the archive package, unzip it, uploade it on your server and then you should load the stylesheet from font archive.

    Cheers

    Radu

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #103491
     verenar
    Participant

    Hey Radu,

    thanks, great support!

    Last question: Where exactly (the path) I have to put the contents from the zip on the server?

    Greetings

    #103600
     Radu
    Moderator

    Hi,

    You can upload these in wp-content/themes/kleo/assets/yourResourcesFolder

    And then the path for the css file with font will be

    http://yourdomain.com/wp-content/themes/kleo/assets/yourResourcesFolder/stylesheet.css

    Cheers

    Radu

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #104677
     verenar
    Participant

    Hey,

    now its working.

    1. Font created with http://www.fontsquirrel.com/tools/webfont-generator
    2. Files saved on http://yourdomain.com/wp-content/themes/kleo/assets/newFont
    3. wp-admin -> theme options -> general settings -> quick css:
    I have to paste hier the complete css from the generated font with the full path to the files.

    @font-face {

    }

    h1,h2,h3,h4,h5,h5 { font-family: ‘ar_berkleyregular’; }

    Thanks!

    #104760
     Radu
    Moderator

    You’re welcome

    Don’t forget to rate our theme 5 stars on Themeforest since it will really help us.

    Cheers

    Radu

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #106833
     andrea14cha
    Participant

    Hello,
    I have created the stylesheet.css with fontsquirrel.com and I saved the file on http://yourdomain.com/wp-content/themes/kleo/assets/Font

    Now what should I write in the quick css?

    @font-face {???
    }

    Thanks in advance,
    Andrea

    #106881
     Radu
    Moderator

    Hi

    You need to add your css font file to head with the function below, replace http://linktomyfont.com/font.css with http://yourdomain.com/wp-content/themes/kleo/assets/Font/yourfontcssfile.css

    COPY CODE
    
    add_action('wp_head','Kleo_hook_font');
     
    function Kleo_hook_font() {
     
    $output="<link rel='stylesheet' href='http://linktomyfont.com/font.css' type='text/css' media='all' />";
     
    	echo $output;
    }
    

    Then in quick css area you will add a css like this

    h1,h2,h3,h4,h5,h5 { font-family: ‘ar_berkleyregular’; }

    Replace ar_berkleyregular with your font family

    Cheers

    Radu

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #129077
     ccreature
    Participant

    Hi Radu, I am trying to add an Adobe Typekit font for use throughout the site, however the above solutions don”t seem to work with the code that Adobe provides.

    This is the code that they provide:

    <script src=”https://use.typekit.net/rbe0ekl.js”></script&gt;
    <script>try{Typekit.load({ async: true });}catch(e){}</script>…

    I cannot seem to figure it out.

    #129080
     Radu
    Moderator

    Hi,

    That code is a javascript one, and that kind of code can be added to wp-admin -> theme options -> general settings -> javascript code in this way you will load that code into kleo theme

    Cheers
    R.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #129096
     ccreature
    Participant

    So I added the code there as well as the css for the selectors, however it is still being overridden with the Google Font I currently have selected.

    #129098
     ccreature
    Participant

    I also cannot seem to find where a font that keeps showing up is. I have attached an image of the issue. The font for the portfolio gallery thumbnails doesnt appear in the list of fonts in the Theme options in the admin panel.

    Attachments:
    You must be logged in to view attached files.
    #129106
     Radu
    Moderator

    For the new rules that you are using add !important at the end and in special cases you should target more accurate the element with css

    from example h1 {font-family:’Monserat’ !important;} maybe it will not works but this maybe it will work .portfolio h1 {font-family:’Monserat’ !important;}

    Try this selector please

    COPY CODE
    
    ul.portfolio-items .portfolio-header h3.post-title, ul.portfolio-items .portfolio-header h3.post-title a { font-family:'arial' !important;}
    

    Replace arial with your font family

    Cheers
    R.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #129140
     ccreature
    Participant

    Alrighty, so this is the CSS I used:

    h1,h2,h3,h4,h5,h5 { font-family: ‘proxima-nova’ !important; }
    ul.portfolio-items .portfolio-header h3.post-title, ul.portfolio-items .portfolio-header h3.post-title a { font-family:’arial’ !important;}

    The portfolio items did change, however all other fonts are still being overridden by the theme (such as menu items)

    #129193
     Radu
    Moderator

    Where do you have added this code ?

    COPY CODE
    
    <script src=”https://use.typekit.net/rbe0ekl.js”></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>
    

    Make sure you load the font….

    You haven’t loaded the font into the website that’s the reason for not working…

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #129457
     ccreature
    Participant

    I added that code in the general settings area for the theme options where it says to add the script… how do I load the font? I though placeing that in the script area did that… no?

    Attachments:
    You must be logged in to view attached files.
    #129472
     Radu
    Moderator

    Hi again,

    Try to use this css

    COPY CODE
    
    h1,h2,h3,h4,h5,h5 {
        font-family: proxima-nova-n9, proxima-nova, sans-serif;
        font-style: normal;
        font-weight: 900;
    }
    
    a,b,p {
    
        font-family: proxima-nova-n9, proxima-nova, sans-serif;
        font-style: normal;
        font-weight: 900;
    
    }
    
    .portfolio-filter-tabs li a {
        font-family: proxima-nova-n9, proxima-nova, sans-serif;
        font-style: normal;
        font-weight: 900;
    }
    

    Let me know if is ok

    PS : I will respond delayed because i’m on holiday, hope you understand.

    Cheers
    R.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #129477
     ccreature
    Participant

    Hi Radu, very much appreciated, worked like a charm 🙂

    #129480
     Radu
    Moderator

    Great

    Have a nice week

    If you are really satisfied by our client support service please leave a positive review about this on the themeforest.net KLEO page : https://themeforest.net/item/kleo-next-level-wordpress-theme/reviews/6776630
    Thanks you in advance

    Regards.

    Radu.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #178038
     faizan
    Participant

    Hello,

    Can I use this with buddypress login?
    https://woocommerce.com/products/tickets-woocommerce/
    So when people are logged in the dont need to signup again to purcahse this?
    Also tell me please, can I easily manage payment integration with that?

    #178133
     Radu
    Moderator

    Hi,

    Please open a new ticker related the question for that plugin, personally i haven’t tested the plugin and i think it should work as it should, just give a try.

    If you are logged in you have already an account maybe it will ask about payment and delivery adresses.

    Since the plugin it’s for the woocommerce the tickets should follow the woocommerce payments method.

    Please reply to me if you will, in a new ticket please.

    Cheers
    R.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #178153
     faizan
    Participant

    Can I integrate eventsbrite into this theme : https://www.eventbrite.com

    #178389
     Radu
    Moderator

    Hi,

    Personally i haven’t tested but, you can give a try.

    If it’s a plugin for woocommerce it should work

    Cheers
    R.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
Viewing 27 posts - 1 through 27 (of 27 total)

You must be logged in to reply to this topic.

Log in with your credentials

Forgot your details?