Changing google fints

Permalink Browser Info Environment
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
View Replies:
pilipala replied on at Permalink Reply
pilipala
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 at Permalink Reply
Hi Jennifer.
OK, I will look it over again to see if I missed something.
Thanks for helping

/Peter
pilipala replied on at Permalink Reply
pilipala
Sure, let us know if you find it still isn't working for you. Thanks,

Jennifer
peel1962 replied on at 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 at Permalink Reply
pilipala
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 at Permalink Reply
Hi again.
Oh yes, that worked fine.😁
Thank you so much

/Peter
pilipala replied on at Permalink Reply
pilipala
Great! Thanks for letting us know :)

Jennifer

concrete5 Environment Information

# concrete5 Version
Core Version - 8.1.0
Version Installed - 8.1.0
Database Version - 20170123000000

# concrete5 Packages
Instafolio (0.9.5), Juniper (1.0.4)

# concrete5 Overrides
languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/en_GB/LC_MESSAGES/messages.mo, languages/en_GB/LC_MESSAGES, languages/en_GB, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/nb_NO/LC_MESSAGES/messages.mo, languages/nb_NO/LC_MESSAGES, languages/nb_NO, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/cs_CZ/LC_MESSAGES/messages.mo, languages/cs_CZ/LC_MESSAGES, languages/cs_CZ, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/es_PE/LC_MESSAGES/messages.mo, languages/es_PE/LC_MESSAGES, languages/es_PE, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/en_GB/LC_MESSAGES/messages.mo, languages/en_GB/LC_MESSAGES, languages/en_GB, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/nb_NO/LC_MESSAGES/messages.mo, languages/nb_NO/LC_MESSAGES, languages/nb_NO, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/cs_CZ/LC_MESSAGES/messages.mo, languages/cs_CZ/LC_MESSAGES, languages/cs_CZ, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/es_PE/LC_MESSAGES/messages.mo, languages/es_PE/LC_MESSAGES, languages/es_PE, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP

# concrete5 Cache Settings
Block Cache - Off
Overrides Cache - Off
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
LiteSpeed

# Server API
litespeed

# PHP Version
5.6.31

# PHP Extensions
bcmath, bz2, calendar, Core, ctype, curl, date, dom, ereg, exif, fileinfo, filter, ftp, gd, gettext, hash, iconv, imap, intl, json, libxml, litespeed, mbstring, mcrypt, memcache, mhash, mysql, mysqli, mysqlnd, openssl, pcntl, pcre, PDO, pdo_mysql, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, Reflection, session, shmop, SimpleXML, soap, sockets, SPL, sqlite3, standard, tokenizer, turbo_realpath, XCache, XCache Cacher, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend OPcache, zip, zlib

# PHP Settings
max_execution_time - 3000
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 5000
memory_limit - 1024M
post_max_size - 100M
sql.safe_mode - Off
upload_max_filesize - 100M
memcache.max_failover_attempts - 20
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - Unlimited
pgsql.max_persistent - Unlimited
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5
RealPath safe mode - <i>no value</i>
realpath_cache_safe_mode - <i>no value</i>
xcache.var_maxttl - 0
opcache.max_accelerated_files - 4000
opcache.max_file_size - 0
opcache.max_wasted_percentage - 5

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.1.2 Safari/603.3.8

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.