Google Fonts
Permalink Browser Info Environment
Can only see one Google font? Should there be a few options? How do I go about installing more? Thank you
| Type: | Pre-Sale |
|---|---|
| Status: | In Progress |
Hi Added the google fonts and now no google fonts are showing. See below code. Is there something else we are meant to be doing? Thanks!
<?php defined('C5_EXECUTE') or die(_("Access Denied."));?>
<!DOCTYPE html>
<html lang="<?php echo Localization::activeLanguage()?>">
<head>
<?php Loader::element('header_required'); ?>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Rancho|Raleway|Comfortaa' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="<?php echo $view->getThemePath();?>/css/bootstrap.min.css" rel="stylesheet">
<?php echo $html->css($view->getStylesheet('main.less'));?>
</head>
<?php defined('C5_EXECUTE') or die(_("Access Denied."));?>
<!DOCTYPE html>
<html lang="<?php echo Localization::activeLanguage()?>">
<head>
<?php Loader::element('header_required'); ?>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Rancho|Raleway|Comfortaa' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="<?php echo $view->getThemePath();?>/css/bootstrap.min.css" rel="stylesheet">
<?php echo $html->css($view->getStylesheet('main.less'));?>
</head>
Hi,
I'm not sure why it's not showing. Can you try manually forcing C5 to use the fonts by editing the default preset less file?
It can be located here: packages/themes/empire/css/presesets/default.less
You should be able to see the heading attributes there.
Please let me know if you manage to get it working, if not, I'll try to figure out the issue on my end.
Best regards.
I'm not sure why it's not showing. Can you try manually forcing C5 to use the fonts by editing the default preset less file?
It can be located here: packages/themes/empire/css/presesets/default.less
You should be able to see the heading attributes there.
Please let me know if you manage to get it working, if not, I'll try to figure out the issue on my end.
Best regards.
Tried changing and didn't make any difference. Bit worried about continuing to change these files as if there is an update will they not be overwritten? Also still not others showing in drop down including the original google fonts you had in there. Thanks for help with this!
below changed less file:
// HEADER
@header-background-color: #000f38;
@header-linktext-color: #fff;
@header-topmost-background-color: #000;
@header-topmost-text-type-color: #fff;
@header-topmost-text-type-font-family: "Raleway",sans-serif;
@header-topmost-text-type-font-size: 14px;
@header-topmost-text-type-font-style: normal;
@header-topmost-text-type-font-weight: 400;
// NAVIGATION
@navigation-background-color: #808080;
@navtext-type-color: #fff;
@navtext-type-font-family: "Raleway",Helvetica,Arial,sans-serif;
@navtext-type-font-size: 13px;
@navtext-type-font-style: normal;
@navtext-type-font-weight: 400;
@activenav-background-color: rgba(0, 15, 56, 1);
@activenav-text-color: #fff;
@hovernav-background-color: rgba(0, 15, 56, 1);
@hovernav-text-color: #fff;
// NAVIGATION SUBMENU
@submenu-text-color: #fff;
@submenu-background-color: rgba(0, 15, 56, 1);
@submenu-border-color: #fff;
@activesubmenu-background-color: rgb(99, 106, 123);
@activesubmenu-text-color: #fff;
@hoversubmenu-background-color: rgb(99, 106, 123);
@hoversubmenu-text-color: #fff;
// HEADINGS
/* h1 */
@h1-type-color: #16254c;
@h1-type-font-family: 'Rancho', sans-serif;
@h1-type-font-size: 36px;
@h1-type-font-style: normal;
@h1-type-font-weight: 500;
/* h2 */
@h2-type-color: #16254c;
@h2-type-font-family: 'Raleway', sans-serif;
@h2-type-font-size: 30px;
@h2-type-font-style: normal;
@h2-type-font-weight: 500;
/* h3 */
@h3-type-color: #16254c;
@h3-type-font-family: 'Raleway', sans-serif;
@h3-type-font-size: 24px;
@h3-type-font-style: normal;
@h3-type-font-weight: 500;
/* h4 */
@h4-type-color: #16254c;
@h4-type-font-family: 'Raleway', sans-serif;
@h4-type-font-size: 18px;
@h4-type-font-style: normal;
@h4-type-font-weight: 500;
/* h5 */
@h5-type-color: #16254c;
@h5-type-font-family: 'Raleway', sans-serif;
@h5-type-font-size: 14px;
@h5-type-font-style: normal;
@h5-type-font-weight: 500;
/* h6 */
@h6-type-color: #16254c;
@h6-type-font-family: 'Raleway', sans-serif;
@h6-type-font-size: 12px;
@h6-type-font-style: normal;
@h6-type-font-weight: 500;
/* p */
@p-type-color: #808080;
@p-type-font-family: Raleway;
@p-type-font-size: 14px;
@p-type-font-style: normal;
@p-type-font-weight: 400;
// TREE MENU
@tree-menu-text-color: #808080;
@tree-menu-background-color: #fff;
@tree-menu-border-color: #ddd;
@tree-menu-hover-text-color: #fff;
@tree-menu-hover-background-color: rgba(0, 15, 56, 1);
@tree-menu-hover-border-color: #ddd;
@tree-menu-collapse-icon-color: #ddd;
@tree-menu-collapse-background-color: #efefef;
@tree-menu-collapse-border-color: #ddd;
// SOCIAL LINKS
@social-link-border-color: #808080;
@social-link-icon-color: #808080;
@hover-social-link-border-color: #26314d;
@hover-social-link-icon-color: #26314d;
// SHARE THIS PAGE
@share-this-page-background-color: #eae7e2;
@share-this-page-icon-color: #808080;
@hover-share-this-page-background-color: #26314d;
@hover-share-this-page-icon-color: #fff;
//FOOTER
@footer-background-color: #000f38;
@footer-links-color: #000f38;
@footertext-color: #000f38;
// PAGE
@global-link-color: #337ab7;
@bodycontainer-color: #fff;
below changed less file:
// HEADER
@header-background-color: #000f38;
@header-linktext-color: #fff;
@header-topmost-background-color: #000;
@header-topmost-text-type-color: #fff;
@header-topmost-text-type-font-family: "Raleway",sans-serif;
@header-topmost-text-type-font-size: 14px;
@header-topmost-text-type-font-style: normal;
@header-topmost-text-type-font-weight: 400;
// NAVIGATION
@navigation-background-color: #808080;
@navtext-type-color: #fff;
@navtext-type-font-family: "Raleway",Helvetica,Arial,sans-serif;
@navtext-type-font-size: 13px;
@navtext-type-font-style: normal;
@navtext-type-font-weight: 400;
@activenav-background-color: rgba(0, 15, 56, 1);
@activenav-text-color: #fff;
@hovernav-background-color: rgba(0, 15, 56, 1);
@hovernav-text-color: #fff;
// NAVIGATION SUBMENU
@submenu-text-color: #fff;
@submenu-background-color: rgba(0, 15, 56, 1);
@submenu-border-color: #fff;
@activesubmenu-background-color: rgb(99, 106, 123);
@activesubmenu-text-color: #fff;
@hoversubmenu-background-color: rgb(99, 106, 123);
@hoversubmenu-text-color: #fff;
// HEADINGS
/* h1 */
@h1-type-color: #16254c;
@h1-type-font-family: 'Rancho', sans-serif;
@h1-type-font-size: 36px;
@h1-type-font-style: normal;
@h1-type-font-weight: 500;
/* h2 */
@h2-type-color: #16254c;
@h2-type-font-family: 'Raleway', sans-serif;
@h2-type-font-size: 30px;
@h2-type-font-style: normal;
@h2-type-font-weight: 500;
/* h3 */
@h3-type-color: #16254c;
@h3-type-font-family: 'Raleway', sans-serif;
@h3-type-font-size: 24px;
@h3-type-font-style: normal;
@h3-type-font-weight: 500;
/* h4 */
@h4-type-color: #16254c;
@h4-type-font-family: 'Raleway', sans-serif;
@h4-type-font-size: 18px;
@h4-type-font-style: normal;
@h4-type-font-weight: 500;
/* h5 */
@h5-type-color: #16254c;
@h5-type-font-family: 'Raleway', sans-serif;
@h5-type-font-size: 14px;
@h5-type-font-style: normal;
@h5-type-font-weight: 500;
/* h6 */
@h6-type-color: #16254c;
@h6-type-font-family: 'Raleway', sans-serif;
@h6-type-font-size: 12px;
@h6-type-font-style: normal;
@h6-type-font-weight: 500;
/* p */
@p-type-color: #808080;
@p-type-font-family: Raleway;
@p-type-font-size: 14px;
@p-type-font-style: normal;
@p-type-font-weight: 400;
// TREE MENU
@tree-menu-text-color: #808080;
@tree-menu-background-color: #fff;
@tree-menu-border-color: #ddd;
@tree-menu-hover-text-color: #fff;
@tree-menu-hover-background-color: rgba(0, 15, 56, 1);
@tree-menu-hover-border-color: #ddd;
@tree-menu-collapse-icon-color: #ddd;
@tree-menu-collapse-background-color: #efefef;
@tree-menu-collapse-border-color: #ddd;
// SOCIAL LINKS
@social-link-border-color: #808080;
@social-link-icon-color: #808080;
@hover-social-link-border-color: #26314d;
@hover-social-link-icon-color: #26314d;
// SHARE THIS PAGE
@share-this-page-background-color: #eae7e2;
@share-this-page-icon-color: #808080;
@hover-share-this-page-background-color: #26314d;
@hover-share-this-page-icon-color: #fff;
//FOOTER
@footer-background-color: #000f38;
@footer-links-color: #000f38;
@footertext-color: #000f38;
// PAGE
@global-link-color: #337ab7;
@bodycontainer-color: #fff;
Hi,
Try clearing your cache and see if the changes you did is working? I'll see if I can replicate your issue on my end.
Thanks and regards.
Try clearing your cache and see if the changes you did is working? I'll see if I can replicate your issue on my end.
Thanks and regards.
Yep have done that a couple of times, also have all my cacheing turned off. Am able to make other design changes and they seem to work. thanks.
Hi,
No worries. I'll let you know if we figure it out.
Thanks.
No worries. I'll let you know if we figure it out.
Thanks.
By the way, can you provide me with a link to your site - so we can check?
www.bluelotusdreaming.com
Hi,
Can you try and go to the customization panel and reset all settings? There should be a "Reset" button at the very bottom of the panel. Hopefully this would flush the saved presets and show your changes.
Please let me know if this works.
Best regards.
Can you try and go to the customization panel and reset all settings? There should be a "Reset" button at the very bottom of the panel. Hopefully this would flush the saved presets and show your changes.
Please let me know if this works.
Best regards.
You can add new google fonts by navigating to packages -> ds_empire57 -> themes -> empire -> elements and open head_element.php with your preferred editor. Add the google font code here and you should be able to use it via CSS.
I hope this made sense. Please let me know if you need help with anything else.
Regards.