fbpx
Welcome, Guest
Username: Password: Remember me

TOPIC: (SOLVED) Google fonts from a local folder

Google fonts from a local folder 2 months 1 week ago #29876

  • Jory
  • Jory's Avatar
  • Offline
  • Junior Member
  • Posts: 21
  • Karma: 0
Sch wrote:
Ok lets do this together step by step.
  1. Close the Astroid template options. That is important because astroid initialises the local fonts on start up.
  2. 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".
  3. Login with your ftp client and navigate to the templates folder. e.g. JOOMLAROOT/templates/astroid_template_zero
  4. Create a folder "fonts"
  5. Copy your downloaded font "MyFont.ttf" inside the fonts folder.
  6. Clear your whole joomla cache for saftey.
  7. Reopen the astroid template options again.
  8. 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.
Attachments:
The topic has been locked.

Google fonts from a local folder 2 months 1 week ago #29877

  • Sch
  • Sch's Avatar
  • Offline
  • Senior Member
  • Posts: 50
  • Thank you received: 7
  • Karma: 2
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
The topic has been locked.

Google fonts from a local folder 2 months 1 week ago #29878

  • Jory
  • Jory's Avatar
  • Offline
  • Junior Member
  • Posts: 21
  • Karma: 0
Sch wrote:
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?
Attachments:
The topic has been locked.

Google fonts from a local folder 2 months 1 week ago #29879

  • Sch
  • Sch's Avatar
  • Offline
  • Senior Member
  • Posts: 50
  • Thank you received: 7
  • Karma: 2
Sounds good. :)
I have no experiance whit fontawsome yet.

Maybe it will work when you import the ttf from fontaswome in the same way.
You can add custom stylesheet files in the astroid option "custom code" especially "Custom CSS Files"
The topic has been locked.

Google fonts from a local folder 2 months 1 week ago #29880

  • Jory
  • Jory's Avatar
  • Offline
  • Junior Member
  • Posts: 21
  • Karma: 0
In any case, thank you again for helping me figure it out, but awesome is another topic, and this topic can be closed. The official support didn't even respond.
The topic has been locked.

Google fonts from a local folder 2 months 1 week ago #29906

  • Chacapamac
  • Chacapamac's Avatar
  • Offline
  • Elite Member
  • Posts: 303
  • Thank you received: 11
  • Karma: 4
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 —





Last Edit: 2 months 1 week ago by Chacapamac.
The topic has been locked.
The following user(s) said Thank You: Jory

Google fonts from a local folder 2 months 1 week ago #29907

  • Jory
  • Jory's Avatar
  • Offline
  • Junior Member
  • Posts: 21
  • Karma: 0
Thank you, this has already been done with Sch, but still thank you again for the answer.
Do you know how to make Awesome fonts also download from a local folder?
Last Edit: 2 months 1 week ago by Jory.
The topic has been locked.

Google fonts from a local folder 2 months 1 week ago #29910

  • Chacapamac
  • Chacapamac's Avatar
  • Offline
  • Elite Member
  • Posts: 303
  • Thank you received: 11
  • Karma: 4
Quote text:
already been done with Sch
Yes but without the same degree of details... :silly:

===============================
• 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:
@import "../../../media/astroid/assets/vendor/fontawesome/css/all.min.css";

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

==========================================================

If you want to go further and have your own Awesome folder

1 — Just download the Awesome package you want —> fontawesome.com/download
Or on Github for older versions —> github.com/FortAwesome/Font-Awesome/releases

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.
<head>
  <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->
</head>

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
Last Edit: 2 months 1 week ago by Chacapamac.
The topic has been locked.

Google fonts from a local folder 2 months 1 week ago #29912

  • Chacapamac
  • Chacapamac's Avatar
  • Offline
  • Elite Member
  • Posts: 303
  • Thank you received: 11
  • Karma: 4
You can look at that generic tutorial from Awesome
fontawesome.com/how-to-use/on-the-web/se...ont-awesome-yourself
The topic has been locked.

Google fonts from a local folder 2 months 1 week ago #29914

  • Jory
  • Jory's Avatar
  • Offline
  • Junior Member
  • Posts: 21
  • Karma: 0
Yes, thank you, the answer was more detailed, in relation to awesome, I did so earlier, but I was not sure if this was enough, now I know that this is correct. Thank you for your responsiveness. :)
The topic has been locked.
Moderators: chandandeep
Time to create page: 0.443 seconds