Hi

To avoid possible problems with theme updates, you could just put it in custom CSS in the design panel.

ADDING A NON GOOGLE FONT TO CUSTOM CSS

This post describes how to add a non google font to custom CSS:

https://www.concrete5.org/community/forums/5-7-discussion/what-is-th...

You could adapt these instructions according to the ones that you received when you downloaded your custom font.

ADDING A GOOGLE FONT TO CUSTOM CSS

If you wanted to use a Google Font you could add it in custom CSS as well.

e.g.

If you change the LESS files, then you can get your font to show in the design panel drop downs, but as you mentioned, you need to ensure you save your changes locally so that you can upload them again if they are overwritten.

CHANGE FONTS USING LESS

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:


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 Nunito 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.

Modified code to add your Google font:



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 'Nunito', 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 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

Hi,
I did it, seem works fine!

Thx very much!

I choose solution:

CHANGE FONTS USING LESS

I save my custom file to overwrite in future it if needed

I need to set "default" preset again before see my font in select menu

Alessandro

Hi Alessandro

Great, thanks for letting us know!

Jennifer

I have followed these and swapped the font for:

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

but Roboto looks like it is defaulting to some other font and not the Rubik - I've done a find and replace in all the defaults.less files and presets, but still not loading. Emptying the Cache hasn't helped either...

Any suggestions?

You could try turning the cache off in the dashboard, then clear cache again, and clear your browser cache. Check that you have added the font according to Google font instructions. Also check that you are using the colour files that are matching the colour preset selected for your theme, e.g. default.

Sometimes the LESS changes don't seem to "take" unless you switch from the colour preset you are using (e.g. default), to a different one (e.g. red), and then back again. However, doing this will reset any changes you have made in the design panel, i.e. if you have changed any colours or anything in there you will need to make those again.

Thanks

Jennifer

That did the trick... I actually took the other color presets off completely and reset it to default and then back to Red.. it is now showing correctly!

Thanks for the help!

Thanks for letting us know :)

Jennifer