This topic has 12 replies, 2 voices, and was last updated 8 years by Radu.

  • Author
  • #133115
     csloan
    Participant

    How can I get access to all of the Google fonts so that they are available with the Custom Header VC element?

    A number of the Google fonts I want to use are not listed in the drop down within the Custom Heading Visual Composer element.  Anyway of getting any other, or even all of the, Google fonts in there?

    Thanks

    #133232
     Radu
    Moderator

    Hi,

    This is not possible to choose what fonts want to have in vc elements, you can use this method : https://archived.seventhqueen.com/forums/topic/how-can-register-japanese-font

    Cheers
    R.

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

    I will try this…but I only want the font to be for one portion of my home page. I don’t want the font, once I upload it using the method in the link you gave me, to be a font used through out the site…just as headers for Essential Grid section (to be specific). Will I still be able to do this, without having to change the font for the rest of the site (like I don’t want to change H1, H2, H3, etc)

    #133381
     Radu
    Moderator

    Ok in this case the method that i have provided to you it’s valid, just load into your header your desired font and then match it with css selectors, after you load the font file to head, i can help you with the selectors for that certain titles, but provide to me a screenshot that pointing out that

    Cheers
    R.

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

    Great…will do. Thanks Radu!

    #133441
     csloan
    Participant
    This reply has been set as private.
    #133503
     Radu
    Moderator

    Hi,

    1. I saw that you have tried to decrease font size but you haven’t written correctly anyways

    replace your child theme css file with this

    http://pastebin.com/raw/HV9T4ArT the banner should fit ok now on tablet and the font size it’s reduced

    Cheers
    R.

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

    Well that’s the thing…I had to reduce the font size in Uber Menu after the theme, after the last update, changed the font sizing to “xx-large”. And the banner was sitting over the left side navigation menu before I changed the font size….the banner issue only happened after I updated.

    Laura is doing some customizations of the header area now (this started after the issues in that ticket and are not related), so I will wait until she is done to make any changes to the CSS.

    Thanks Radu

    #133567
     csloan
    Participant

    I tried replacing the css file with your file…and it looks like it screwed up a lot of the style settings on the site. But before I made the change I backed up the original CSS file just in case. When I saw that I didn’t like the changes from your CSS file, I just put the original CSS file back. I also thought that I shouldn’t be changing any CSS until Laura is done with what she’s doing. But the site is still really screwed up. Please look at any of the posts pages…and why are all the post titles still in blue on the home page? I don’t think Laura has done this…but I asked her too.

    #133617
     csloan
    Participant

    Laura activated the main theme and then reactivated the child theme. That cleared the cache and fixed the issue.

    However, I am still not clear on why, after the last update, Kleo changed my logo size to “xx-large” (see the screenshot in that thread. You can answer me over there if that helps. I still have to do what you suggested above for the Fonts…otherwise I would just close this ticket.)

    Thanks Radu

    #133696
     Radu
    Moderator

    Hi,

    This is the selector with you can control the logo font size….

    COPY CODE
    
    .logo img {
        font-size: 12px !important;
    }
    

    Adapt it for your needs.

    Let me know if we can close this ticket

    Cheers
    R.

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

    Back to the font issue…at the link you provided me the first thing I am supposed to do is add the following code to the head, yes? And can I just paste this in the “Edit CSS” section?

    add_action(‘wp_head’,’Kleo_hook_font’);

    function Kleo_hook_font() {

    $output=”<link rel=’stylesheet’ href=’http://linktomyfont.com/font.css&#8217; type=’text/css’ media=’all’ />”;

    echo $output;
    }

    Also:

    1. I know that I need to edit the href: “http://linktomyfont.com/font.css&#8221; to reflect where I put the font file, which would be located at: http://freedomleaf.com/wp-content/themes/kleo/assets/Font/WHATEVERICALLTHEFONTFILE.css&#8230;.So, can “WHATEVERICALLTHEFONTFILE” be a folder containing all the fonts I want to add? Or is this .css supposed to be per each font?

    2. I have a folder of All Google’s fonts that I would like to add. It’s a zipped folder. Is it possible to just add all of them? Or is that too many? Just not sure if then I should pick and choose which fonts I’d like to add. But if that’s better to do, I will.

    3. I would then just need to know how to do this, if I can upload the entire Google fonts family folder:
    Then add to css (wp-admin -> theme options -> general settings -> quick css)

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

    Thanks for all of your help Radu,

    Chris

    #134176
     Radu
    Moderator

    Hi,

    1. Yes it should be a separate file for every font but you can create general css file named all_ggl_fonts.css and in that file you can use @import or @font-face rule to import each font family then you will have to include in your head with the function that i have provided to you only that file that contains @import with all your selected fonts.

    Example

    COPY CODE
    
    function Kleo_hook_font() {
    
    $output=”<link rel=’stylesheet’ href=’http://linktomyfont.com/all_ggl_fonts.css’ type=’text/css’ media=’all’ />”;
    
    echo $output;
    }
    
    
    

    Then set from css the new font family for every element

    Example :

    COPY CODE
    
    body,a,b,h1,h2,h3,h4,h5,h5 { font-family : ‘FONT NAME’; }
    
    

    If you want to have separate font family depends by element or heading 1,2 or 3

    Example :

    COPY CODE
    
    body,a,b { font-family : ‘FONT NAME’;  } 
    h1,h2,h3,h4{ font-family : ‘OTHER FONT NAME’;  } 
    h4,h5,h6 {  font-family : ‘OTHER FONT NAME TWO ’;  } 
    

    Reference Links : https://css-tricks.com/snippets/css/using-font-face/

    2. Use the above method…

    3. Use the above method

    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 13 posts - 1 through 13 (of 13 total)

The forum ‘General questions’ is closed to new topics and replies.

Log in with your credentials

Forgot your details?