Add custom font AvenirLTStd

Permalink Browser Info Environment
Hi Jennifer,
thanks very much for reply on other ticket. I have another question:

on current sitehttp://www.lavelenosa.it we use a custom Font defined:

{
font-family: AvenirLTStd;
src: url("/packages/theme_wieldy/themes/wieldy/css/AvenirLTStd_Book.otf") format("opentype");
}

which is the better way to integrate new font in Juniper without to interrupt future update?

Is possible show new font AvenirLTStd in custom palette inside Concrete5 theme customization?

if AvenirLTStd is difficult could be enough a standard Avenir from google font or ohter resources

TIA
Alessandro

Type: Pre-Sale
Status: Resolved
lota
View Replies:
pilipala replied on at Permalink Reply
pilipala
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.
@import url('https://fonts.googleapis.com/css?family=Nunito');
p {
font-family: 'Nunito', sans-serif;
}

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:

@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 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:

@import url(https://fonts.googleapis.com/css?family=Nunito:400,400i,700,700i|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 '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
lota replied on at Permalink Reply
lota
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
pilipala replied on at Permalink Reply
pilipala
Hi Alessandro

Great, thanks for letting us know!

Jennifer
sungraphics replied on at Permalink Reply
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?
pilipala replied on at Permalink Reply
pilipala
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
sungraphics replied on at Permalink Reply
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!
pilipala replied on at Permalink Reply
pilipala
Thanks for letting us know :)

Jennifer

concrete5 Environment Information

---

Browser User-Agent String

Mozilla/5.0 (X11; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.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.