Monitor Reply

Support

Changing google fints

Permalink Browser Info Environment August 30, 2017 at 9:47 AM

Hi.
What is the best way to change the default font Roboto into another google font? (Antic Slab)
I am doing changes in all the .less files adding another font, but I cannot see any difference. I What am I missing?

/Peter

Type:	Pre-Sale
Status:	Resolved

pilipala replied on Aug 30, 2017 at 7:11 pm Permalink Reply

Hi,

Instructions for changing Google Fonts in Juniper theme (choose whichever fonts and font styles you want):

1. Change the defaults.less file located here (or another colour less file if you are not using the default colour scheme):

juniper\themes\juniper\css\build\fonts\

Original code:

@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic|Playfair+Display:400,700,700italic,400italic);

So you need to import whichever font you want to use here. Google Fonts will provide the information that you need. If you are not going to use one font, then delete it. Or if you want to keep all of them, but just add another font, then just add in the new font you want.

For example, if you wanted to change Roboto to Antic slab you could do it like below. Please bear in mind that some Google Fonts don't have many styles. From above, you will see that Roboto has been imported with two font weights: 400 and 700 in normal and italic text. I can see Antic slab only has one font weight (no bolder font), so you might want to try a different font with more styles available, or use a combination of fonts.

Modified code to add your Google font:

@import url(https://fonts.googleapis.com/css?family=Antic+Slab|Playfair+Display:400,700,700italic,400italic);

2. Then change defaults.less file located here (or another colour less file if you are not using the default colour scheme):

juniper\themes\juniper\css\presets

Everywhere you see 'Roboto', sans-serif; replace it with the font that you want as per Google Font's instructions. E.g. do a find and replace for 'Roboto', sans-serif; with 'Antic Slab', serif;

Upload both files to your server. Save the modified files elsewhere so that you can keep them to upload again if you ever update Juniper theme, as changes will be overwritten with theme upgrades. By the way, you can also create your own named preset if you prefer, e.g. custom.less. Just copy the defaults.less files in both locations, name them both custom.less and make the changes you need. Then you would select custom in the design panel.

Thanks,

Jennifer

peel1962 replied on Aug 31, 2017 at 7:05 am Permalink Reply

Hi Jennifer.
OK, I will look it over again to see if I missed something.
Thanks for helping

/Peter

pilipala replied on Aug 31, 2017 at 4:33 pm Permalink Reply

Sure, let us know if you find it still isn't working for you. Thanks,

Jennifer

peel1962 replied on Sep 1, 2017 at 1:18 pm Permalink Reply

Great!! It works just fine now. I had to recheck one of the presets to get it to work.
One other thing. I´m using a page list block and unchecked the "Page Name" in the settings, but when I chose "juniper_portfolio_two_column" the page name is still showing.
Is there a way to force it not to be visible?

Thanks
/Peter

pilipala replied on Sep 1, 2017 at 7:24 pm Permalink Reply

Hi

You could create a custom page list template based on that one or modify the view.php directly. Please ensure to save modified files elsewhere so that you don't lose them when you upgrade the theme in the future.

The lines on that template that add the title are lines 62 to 67

<div class="juniper-pf-item-title">
          <h3 class="juniper-animated-underline"><a href="<?php echo $url ?>" target="<?php echo $target ?>">
            <?php  echo $title ?>
            </a></h3>
        </div>
        <!-- /.juniper-pf-item-title-->

Option 1. delete those lines.
Option 2. Change it so that you can choose in the block to show the title or not.

To use Option 2, change the above code to this code below:

<?php if ($includeName): ?>
        <div class="juniper-pf-item-title">
          <h3 class="juniper-animated-underline"><a href="<?php echo $url ?>" target="<?php echo $target ?>">
            <?php  echo $title ?>
            </a></h3>
        </div>
        <!-- /.juniper-pf-item-title--> 
        <?php endif; ?>

If you want to create a custom template the steps are below (otherwise you can just edit the existing template directly:

How to create a new custom template for the Page List block.
1. Create a new folder under juniper\blocks\page_list\templates in the Juniper package ( e.g. custom_portfolio)
2. Copy the view.php file in the folder located here juniper\blocks\page_list\templates\juniper_portfolio_two_column
3. Open this file in a text editor such as Notepad or Dreamweaver to edit.
4. Copy this modified view.php file under your new folder from step 1 (e.g. custom_portfolio).
5. Go to your portfolio page and click on the portfolio page list block in edit mode and choose Design and Custom Template > Cog icon > under custom templates your new custom template that you have created, e.g. Custom Portfolio

Thanks

Jennifer

peel1962 replied on Sep 2, 2017 at 9:22 am Permalink Reply

Hi again.
Oh yes, that worked fine.😁
Thank you so much

/Peter

pilipala replied on Sep 2, 2017 at 7:54 pm Permalink Reply

Great! Thanks for letting us know :)

Jennifer

Juniper

Support

Changing google fints

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post