Close the Astroid template options. That is important because astroid initialises the local fonts on start up.
Go to google fonts, 1001fonts or any other fonts page and download your font in format otf or ttf. Lets say the fonts name is "MyFont".
Login with your ftp client and navigate to the templates folder. e.g. JOOMLAROOT/templates/astroid_template_zero
Create a folder "fonts"
Copy your downloaded font "MyFont.ttf" inside the fonts folder.
Clear your whole joomla cache for saftey.
Reopen the astroid template options again.
Go to typography and search for "MyFont"
Thank you for your advice, but I have already done all this more than once, the template does not see my fonts, I downloaded the necessary Google fonts and put them in the fonts folder. Now I followed your advice, downloaded the polaris font from the site 1001fonts, put it in the right folder, cleared the cache, - no use. The system does not see the fonts.
The problem is, that you put your fonts in a subfolder.
It is nessesary to put the otf or ttf file directly in the folder font like that: JOOMLAROOT/templates/astroid_template_zero/fonts/polaris.ttf
Thank you so much for your help, now it loads normally, the option has appeared. But awesome fonts also need to be extracted from the subfolder? There are still css styles that are also loaded locally, also do?
Just a complete steps by steps with additional notes:
Use local fonts in Astroid “Typography” in the template manager Fonts Need to be loose in the “fonts” folder, cannot be in a subfolder
1- Close the Astroid template manager. That is important because astroid initialises the local fonts on start up.
2- Download your fonts from a well know provider( Google Fonts, 1001fonts or other…) in the format otf or ttf or the more modern & performant woff format. — (woff2 (even better) seem to not be compatible with Astroid yet…)
3- Lets say the fonts file name is "oswald-v36-latin-regular.woff".
4- Login with your ftp client and navigate to the templates folder. — e.g. JOOMLAROOT/templates/astroid_template_zero
and create a folder name "fonts" — e.g. JOOMLAROOT/templates/astroid_template_zero/fonts
5- Copy your downloaded font file — e.g. "oswald-v36-latin-regular.woff" inside the newly created fonts folder. NOTE: need to be at the first level in the “fonts” folder to work
— e.g. JOOMLAROOT/templates/astroid_template_zero/fonts/oswald-v36-latin-regular.woff NOT in a subfolder
— e.g. JOOMLAROOT/templates/astroid_template_zero/fonts/SUBFOLDER/oswald-v36-latin-regular.woff
6- Clear your whole Joomla cache for safety and reopen the astroid template options again.
7- Go to typography and you should find your custom font with a similar name under the “Custom Fonts” category drop down just after the “System Fonts” and before the “Google fonts/” category NOTE: the final name of the font is given by the code inside the font file (at least with “woff” files) and can be different from the name of the file itself.
In this example (see image below) —>e.g. "oswald-v36-latin-regular.woff" become “Oswald Regular” in Astroid Typography settings.
— See image below —
=============================== • Do you know how to make Awesome fonts also download from a local folder?
The super easy way: 1- Go to your Astroid Plugin and turn the font Awesome Loading to Local
Note: Astroid will load it’s own local Awesome fonts situated at —>
JOOMLA ROOT /media/astroid/assets/vendor/fontawesome/css/all.min.css";
That’s it, Awesome is now loaded local for the frontend
================================================= Also you can have Awesome load in your own editor to have a real WYSIWYG experience...
As example: JCE Editor permit to add a custom editor css (that load only in backend), I just add this code in my
—> astroid_template_zero > css > editor_content.css
the following call:
and boom, I got Awesome loading also in the editor...
More, JCE now can load ALL the compiled CSS directly generated by the Astroid template (custom.scss & all) right in the editor window - You get REALLY WYSIWYG
2— put it in the template fonts folder (be sure to put it in a subfolder as it will not load in backend in the typography settings of the template manager ( Astroid_template > fonts > folder-awesome > all your files & css)
or your own created folder in JOOMLA ROOT > media I think it should be safe in media (I use it myself but I will check if it’s secure to do so)
3 — Copy the entire /webfonts folder and the /css/all.css into your created directory (fonts or media)
4 — Go to your Astroid Plugin and turn the font Awesome Loading to OFF
5 —- Add a reference to the copied /css/all.css file into the <head> of each template or page that you want to use Font Awesome on.
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->
You can use the Astroid “Custom CSS” settings in your Astroid template manager or by menu item in their Astroid “Custom CSS” options if necessary
JoomDev is not affiliated with or endorsed by Open Source Matters or the Joomla! Project. The Joomla! logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.