Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Fontsquirrel - Switch to local fonts entirely

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

8 years 11 months ago
Hello @Joomlabamboo

I am new to your templates, so please bear with me.

I installed locally the Ecolife template and I am trying to get around. I have never before worked with you framework, so many things are different for me.

One o my main tasks would be to use internally installed fontsquirrel fonts instead of Google fonts. Is there any documentation how to change to that?

Thanks for a short feedback!
  • X-Bit's Avatar
  • X-Bit
  • 12 Month basic
  • 47 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
8 years 11 months ago
Hi

Is it just the one set of font files?

It will slow the site down - which font are you planning to use?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
8 years 11 months ago
Hello Paul!
No, it would be three different sets of fonts. We are not sure about the fonts right now, but we would like to host them on the server, not like google fonts, where it is loaded from them.

I really think having the fonts locally accessible would speed things up, am I wrong?
  • X-Bit's Avatar
  • X-Bit
  • 12 Month basic
  • 47 posts
  • 1 Thanks
  • Karma: 0
Last Edit: 8 years 11 months ago by X-Bit.
The administrator has disabled public write access.
8 years 11 months ago
Performance wise - it will depend on the font file sizes but I wouldn't expect to see faster performance

I'd try using font face

css-tricks.com/snippets/css/using-font-face/

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
8 years 11 months ago
Yes, Font Face will do it as well. Is there any documentation about how to implement it in in Zen Grid Framework? Where to go with the fonts? Where to put the @font-face css? Where to modify the stylesheet settings?

We experienced some problem with google fonts, as they took long to load. Might be a local problem here in Brazil.
  • X-Bit's Avatar
  • X-Bit
  • 12 Month basic
  • 47 posts
  • 1 Thanks
  • Karma: 0
Last Edit: 8 years 11 months ago by X-Bit.
The administrator has disabled public write access.
8 years 11 months ago
Hi

You would upload the font files as per that link I gave
Then add them to the custom css
Then load the font in the css for whatever div you want them to display in

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
8 years 11 months ago
Hello Paul,

Thanks, I sorted it out.
For the records:
- I downloaded the whole font kit at fontsquirrel, it includes .eot, .svg, .woff and .ttf fonts.
- I created a new directory "fonts" in /templates/ecolife
- I added the lines to the custom.css:
@font-face {
    font-family: 'sf_cartoonist_hand_scbold';
    src: url('../fonts/headings/SF_Cartoonist_Hand_SC_Bold-webfont.eot');
    src: url('../fonts/headings/SF_Cartoonist_Hand_SC_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/headings/SF_Cartoonist_Hand_SC_Bold-webfont.woff') format('woff'),
         url('../fonts/headings/SF_Cartoonist_Hand_SC_Bold-webfont.ttf') format('truetype'),
         url('../fonts/headings/SF_Cartoonist_Hand_SC_Bold-webfont.svg#sf_cartoonist_hand_scbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

- No need to change the stylesheet settings.
- After that I just applied in custom.css
h1, h2, h3, h4, h5, h6 {
    color: #607750;
    font-weight: 300;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.15); 
	font-family: sf_cartoonist_hand_scbold !important; }
- It must have the !important for overwriting the existing settings.

Maybe anyone could use it in future.
  • X-Bit's Avatar
  • X-Bit
  • 12 Month basic
  • 47 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
The following user(s) said Thank You: manh
8 years 11 months ago
Yep sorry I should have mentioned !important

Thanks for posting your solution

Good luck with the site

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers

Close