-
Author
-
August 19, 2016 at 03:48 #133115csloanParticipant
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
August 19, 2016 at 20:07 #133232RaduModeratorHi,
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 solutionAugust 22, 2016 at 08:54 #133314csloanParticipantI 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)
August 22, 2016 at 16:08 #133381RaduModeratorOk 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 solutionAugust 23, 2016 at 15:23 #133503RaduModeratorHi,
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 solutionAugust 23, 2016 at 22:42 #133565csloanParticipantWell 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
August 23, 2016 at 23:01 #133567csloanParticipantI 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.
August 24, 2016 at 08:48 #133617csloanParticipantLaura 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
August 24, 2016 at 17:55 #133696RaduModeratorHi,
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 solutionAugust 26, 2016 at 23:01 #134040csloanParticipantBack 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’ type=’text/css’ media=’all’ />”;
echo $output;
}Also:
1. I know that I need to edit the href: “http://linktomyfont.com/font.css” to reflect where I put the font file, which would be located at: http://freedomleaf.com/wp-content/themes/kleo/assets/Font/WHATEVERICALLTHEFONTFILE.css….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
August 29, 2016 at 16:54 #134176RaduModeratorHi,
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 CODEfunction 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 CODEbody,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 CODEbody,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 -
AuthorPosts
The forum ‘General questions’ is closed to new topics and replies.