How to add fonts to Astroid templates?

[fontanil]

Hi,

I would like to add fonts, preferably local, in Astroid templates for Joomla! 4 to use them in the template options and in the editor list of fonts.
For example I want to use Google Dosis (I downloaded the zip file from Google Fonts), or Tex-Gyre-Adventor (I downloaded the pack from another site). How to add them to Astroid?

Thanks for your help!
fontanil

[TS-R]

Hi fontanil,

Few days ago I saw a video on yourube about this.

https://youtu.be/fuyAJr6Ntig

Is this what you are going to do?
May be this helps.

Hint: take care if this is allowed by the license the font you are using is released with.

[fontanil]

Thanks for your reply. I'm able to read and translate English, but I don't understand spoken English. :(

So I found this page from Joomdev https://www.joomdev.com/how-to-add-custom-font-to-your-joomla-template/

What I am looking for is adding a new local font (or many) in a website (from Google Fonts or other) to not use remote fonts. Then, I would like to have it in the options of the layout of the template and in the fonts list in the text editor to select it when necessary.
I downloaded from Google fonts Dosis and Italianno, put them in astroid_template_one/fonts/dosis-v27 and astroid_template_one/fonts/italianno-v16 and added in the custom css field of the template:
@font-face { font-family: 'dosis-v27'; src: url('../fonts/dosis-v27/dosis-v27-latin-regular.woff2') format('woff2'), url('../dosis-v27-latin-regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'italianno-v16'; src: url('../fonts/italianno-v16/italianno-v16-latin-regular.woff2') format('woff2'), url('../italianno-v16-latin-regular.woff') format('woff'); font-weight: normal; font-style: normal; }
But I don't see the fonts in the text editor, only remote Google Dosis in the template options, Italianno is unknow.
What is my mistake?

[Chacapamac]

I @fontanil I will try to help.

You said:

I don't see the fonts in the text editor

What editor are you using? — You need to have an editor that is capable to load the font calls that you add in your custom CSS or SCSS or, ideally, that load your full custom or Astroid compiled CSS files.

I use JCE — It can load automatically all CSS files compiled from your Astroid_Template/css folder
This way, when you are in the editor, you can see a WYSIWYG edition window that show all the same css as the front view of the website.
In JCE, you can even add the onboard Astroid Awesome library (or any other library) by adding an ”import” call to any of your custom CSS/SCSS
Example:
@import "../../../media/astroid/assets/vendor/fontawesome/css/all.min.css";

The Following is a screenshot from Joomla backend edition in JCE

You said:

only remote Google Dosis in the template options

I guess you mean that you correctly see your custom fonts in the Astroid Typography manager? in the “Custom” zone
Example:

You said:

Italianno is unknown

Can you be more specific here?

NOTE:
For inserting easily any Google font I use that tools that make the process easy. It help to be sure that you have no mistake in your @font-face call
—> https://google-webfonts-helper.herokuapp.com/fonts

— You can add your path prefif (../fonts/)
— You can choose “Modern Browsers” for performance or “Best Support” for backwards compatibility
— Download easily the fonts packages and CSS calls

[Chacapamac]

For your “Italiano” I will add the call using my tools and also redownload and replace the fonts.
I just try and it seem to work — Available as “Custom Font” in Astroid

Suggestion for @sonvnn
It will be great if we can see the preview of custom fonts in the backend....

[Chacapamac]

Another Tip.
In your custom SCSS file you can add variable that render the application of style to elements flexible and easy to add.
You need to use the font family name in the @font-face call

@font-face {
font-family: 'Oswald';

Example with Custom Typography

///* :::::::::::::::::::::TYPO VARIABLES */
///Title & Text FONT FAMILY --------/
$title-font:"Source Sans Pro", Verdana, sans-serif;
$body-font:"Source Sans Pro", Verdana, sans-serif;
$compress-font:'Oswald', Verdana, sans-serif;

I love Variable, you can change all typography (and all other repeating styles, like colors an others..) in a web site by changing the variables

[fontanil]

Thanks Chacapamac.

I'm using JCE and I tested TinyMCE too: in the fonts list, we have only the default local fonts.

Firts for the template fonts options:
On a new site on Astroid template One, in the typography choices of the template, only Dosis is available in the remote Google fonts list (not Italianno).
I imported the two fonts Dosis and Italianno from Google fonts site, put them in the fonts folder of the template and added the css declaration "@font-face" for both in the Custom CSS field of the template, not in a custom.css file. I replaced the code in a custom.css file

None is available as a system font and there is no custom font in the list.

I will try to find where is my error and see later for JCE.

[fontanil]

Sorry, I really don't find what is my error.

I add the two fonts in astroid_template_one/fonts

Then I create a custom.css in the css folder

But I don't see custom fonts in the fonts listing in the template style.
What is missing?

[Chacapamac]

@fontanil — Try to put the font files loose in the “fonts” folder, not in a folder (dosis-v27/italianno-v16)
I think the system need to see the font files directly in the “fonts” folder

The call shoukd be (look at the path)

/* italianno-regular - latin /
@font-face {
font-family: 'Italianno';
font-style: normal;
font-weight: 400;
src: local(''),
url('../fonts/italianno-v16-latin-regular.woff2') format('woff2'), / Chrome 26+, Opera 23+, Firefox 39+ /
url('../fonts/italianno-v16-latin-regular.woff') format('woff'); / Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

In the Font Family Astroid setting
If you have no custom fonts you see only the “System fonts” & the “Google fonts” showing.
“Custom fonts” appear only if you added a custom font file in the “fonts” folder even if you don't add the css call to it in your css (obviously this call is still needed for the font file to be seen in frontend)

The “Custom fonts” appear just after the “System fonts” —> Verdana, Geneva

—————————————————————————————————
NOTE ON JCE:

I'm using JCE and I tested TinyMCE too: in the fonts list, we have only the default local fonts.

Yes this is normal, in fact, I personally remove the “Font family” choice possibility for my users and let everything be control by the CSS. If you think about it, very rarely you should add the font family as an inline style. If you let the users change the font-family you end up with a myriad of font style that doesn't look professional.

By CSS and if JCE is properly set you should see your Custom body & Title fonts (and other fonts you set in css) appear in the edition windows the same way it will show in the frontend.
Example: If you set in CSS the h1, h2, h3 as Italiano & your body text as Source Sans Pro, this what you will see in the editor window (even in Joomla back-end). Your editor become WYSIWYG and your users don't even need to enter any inline font family style

[fontanil]

Thanks! :)
It works. I had an error in the custom.css file.
I understand for JCE.

[Chacapamac]

Cool....
Example WYSIWYG in JCE, — No need of using Font Family — Typography all control by CSS