Is there a way to add different fonts?

Permalink Browser Info Environment
Is there a way to add different fonts to the theme?

Type: Pre-Sale
Status: Resolved
View Replies:
pilipala replied on at Permalink Reply
pilipala
Hi,

You can change fonts in the design panel. When you're logged into your concrete5 website, click on the cog or gear icon (top left toolbar) and then click on design. Then click on Customise under the Salix thumbnail. You can choose different fonts where it says "text" ."handwritten text" "heading 1" etc.

If you want to add more / different Google Fonts to Salix theme, please follow the instructions below (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):

salix\themes\salix\css\build\fonts\


This is where you need to import whichever font you want to use here. Google Fonts will provide the information that you need http://fonts.google.com/. 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 add Open Sans, you would add this to the defaults.less file:

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&display=swap');


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

salix\themes\salix\css\presets

In this file, you need to replace the fonts that you want as per Google Font's instructions, e.g. do a find and replace for the font that you don't want to use and substitute with 'Open Sans', sans-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 Salix 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
bhans replied on at Permalink Reply
I edited both less files (I am using redless for now). I added this in the build\fonts:

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:700i&display=swap');


I edited all headings and menu items with Fira Sans as per Google directions in the \presets.

It appears that it is not loading and reverting to Sans Serif, the backup font. I tried emptying cache and reloading and also making sure automated jobs were complete.

Am I missing something?
Also, thanks much for your help with original message.
pilipala replied on at Permalink Reply
pilipala
Hi,

Looking at the CSS on your website, I can see that the Fira font is being imported, but I don’t see the Fira font style used anywhere in the CSS. Please double check that you have included the Fira font in the correct less file (i.e. red.less in the folder salix\themes\salix\css\presets) and that this modified file has been uploaded to your server.

e.g. if you wanted to change heading 1 to Fira, you would use:

@h1-type-font-family: 'Fira Sans', sans-serif;


Also, you will need to check that you have imported the correct font weight and style to use. In the red.less file there is no option for changing the font weight, so you should either use the font weights of the existing fonts you are replacing, or change the font weights in the CSS files. If you are replacing Montserrat font, then you would need to select a font with 400 and 700 weight. If you need to change the font weights in the CSS files, please edit them in the appropriate CSS files here salix\themes\salix\css\build , headings are in miscellaneous.less and menu is in topmenu.less

If you have checked this, and the font still isn’t showing, it may be that the CSS hasn’t compiled with the changes. Sometimes you have to select a different colour in the design panel and save it, then choose your colour (i.e. red), in order to get the changes to show. Styles can get cached and this seems to do the trick.

Thanks, Jennifer
pilipala replied on at Permalink Reply
pilipala
I should mention, if you do find you need to switch the colours in the design panel (last paragraph above) in order to get the styles to show, make a note of any changes you have made previously (if any) to the default style settings. When you change the colour in the design panel, it will lose any changes made there and revert to the original style settings.

Best, Jennifer
bhans replied on at Permalink Reply
Got it working. thanks for the help and great info.
pilipala replied on at Permalink Reply
pilipala
Thanks for letting us know :) Jennifer

concrete5 Environment Information

# concrete5 Version
Core Version - 8.5.2
Version Installed - 8.5.2
Database Version - 20190925072210

# Database Information
Version: 5.6.45
SQL Mode: NO_ENGINE_SUBSTITUTION

# concrete5 Packages
Leaflet Maps (1.0.2), Salix (1.1.0), Simple Gallery (1.0.9), Speed Analyzer (1.2.3)

# concrete5 Overrides
None

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - On - If blocks on the particular page allow it.
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Apache

# Server API
fpm-fcgi

# PHP Version
7.2.20

# PHP Extensions
bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dba, dom, exif, fileinfo, filter, ftp, gd, gettext, gmp, hash, iconv, imap, intl, ionCube Loader, json, ldap, libxml, mbstring, memcached, mysqli, mysqlnd, openssl, pcntl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, posix, Reflection, session, shmop, SimpleXML, soap, sockets, SPL, sqlite3, standard, sysvsem, sysvshm, tidy, tokenizer, wddx, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend OPcache, zip, zlib

# PHP Settings
max_execution_time - 30
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 1000
memory_limit - 256M
post_max_size - 8M
upload_max_filesize - 20M
ldap.max_links - Unlimited
memcached.sess_lock_max_wait - not set
memcached.sess_lock_wait_max - 150
memcached.sess_server_failure_limit - 0
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5
opcache.max_accelerated_files - 10000
opcache.max_file_size - 0
opcache.max_wasted_percentage - 5

Browser User-Agent String

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0

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.