Joomlabamboo Support Forum :: Topic: Cufon ffont integration? (1/1)

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.

Cufon ffont integration?

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

9 years 19 hours ago

Hi there, First time post...

I'm redeveloping an existing corporate PHP site with Joomla and the RASA2 template, which the client LOVES.

And of course I've discovered a snag! ALL of my clients paper marketing materials and cards, as well as the existing website, are designed using two specific fonts. The previous developer used Cufon to implement these fonts on the site, and I do have the font.js files.

I've looked in Google and have had no luck finding them in the Google lists, so can't use the built in Google font in Rasa2.

So... is there a way to either integrate custom fonts from a font.js file,, or integrate Cufon, with Z4 and Rasa2 that will not become a code hack? I'm aiming to make this site fully updatable without custom coding if at all possible.

Any help or feedback would be GREATLY appreciated!!

Steve Pritchard
12 Month Developer
97 posts
Karma: 0

The administrator has disabled public write access.

9 years 8 hours ago

Hi Steve,

I think Cufon is pretty old technology when it comes to webfonts. So my first questions is what are the fonts and are they available on typekit of another font service?

Thanks

Anthony Olsen
LIfetime Developer - Big Bamboo
23925 posts
788 Thanks
Karma: 433

The administrator has disabled public write access.

The following user(s) said Thank You: Steve Pritchard

9 years 6 hours ago

Is there a similar font on www.fontsquirrel.com/ ?

Cheers
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

The following user(s) said Thank You: Steve Pritchard

9 years 3 hours ago

Hi again, thanks so much for the quick replies.

The fonts are Delta-Jaeger and Decker. I've searched around and I can download both in TTF files if that helps. Though each seem to be located on different font sites.

I'm not attached to Cufon, It's simply what the previous designer used. I'm happy if there is any way to use these fonts without too much trouble.

Also, these are only used for heading fonts, not body.

I've found Delta-Jaeger at www.azfonts.net
and Decker at www.fonts2u.com

Steve Pritchard
12 Month Developer
97 posts
Karma: 0

The administrator has disabled public write access.

8 years 11 months ago

With those files can you create the font pack?
Does the font license allow this usage?

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

Cheers
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

The following user(s) said Thank You: Steve Pritchard

8 years 11 months ago

Thanks Paul, that looks like a viable option for now. I'll have to see if the fonts would be visible in the main theme settings to set them as H1/2/3 etc. At least this is an option for the client!

Cheers!
paulus103 wrote:

With those files can you create the font pack?
Does the font license allow this usage?

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

Cheers
Paul

Steve Pritchard
12 Month Developer
97 posts
Karma: 0

The administrator has disabled public write access.

8 years 11 months ago

Hi Steve,

Let us know how you get on with the client

Cheers
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

8 years 11 months ago

The client - all good! For now we are going to move Header and text fonts to google fonts that are close to their original until I'm clear that any code changes to integrate their fonts will not break any updating of components or theme.

Me - more questions! Which I'll post as new topics.

Steve Pritchard
12 Month Developer
97 posts
Karma: 0

The administrator has disabled public write access.

8 years 11 months ago

Cool - thanks for the update

Cheers
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

8 years 6 months ago

Hi there,

I'm finally getting around to integrating the font pack into the site!

You mentioned 'adding the font to the CSS file'. I've added the @font-face declaration within the custom.css file I'm already using but the font is not getting picked up.

This is what I have:
The font is installed in the following folder: Rasa2/fonts/delta/

my custom.css has the following code:

@font-face {
    font-family: delta_bqregular;
    src: url('URL/templates/rasa2/fonts/delta/delta-jaeger-r-medium-webfont.eot');
    src: url('URL/templates/rasa2/f/fonts/delta/delta-jaeger-r-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('URL/templates/rasa2/f/fonts/delta/delta-jaeger-r-medium-webfont.woff2') format('woff2'),
         url('URL/templates/rasa2/f/fonts/delta/delta-jaeger-r-medium-webfont.woff') format('woff'),
         url('URL/templates/rasa2/f/fonts/delta/delta-jaeger-r-medium-webfont.ttf') format('truetype'),
         url('URL/templates/rasa2/f/fonts/delta/delta-jaeger-r-medium-webfont.svg#delta_bqregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

My custom.css also has this listing for H1 to test the new font:

h1 {
   	 font-family: delta_bqregular,serif;
	font-size: 200%;
	color: #005695;
}

I also set the “Heading” font selection to a google font ‘Open-Sans’ inside the template editor. I did this as it appears you cant select anything like (none).

The custom.css is loaded at the end of the CSS list inside the HEAD tag, so I would assume it would override any other css. However it doesn’t appear to do that. The font on the page is beingsey by the template Heading selector. The colour and size ARE being altered by custom.css however.

Any ideas?

Steve Pritchard
12 Month Developer
97 posts
Karma: 0

The administrator has disabled public write access.

8 years 6 months ago

Hi,

Not sure what the URL letters are in your declaration:

src: url('URL/templates/rasa2/fonts/delta/delta-jaeger-r-medium-webfont.eot');

Is that a variable or do you need to type the address there?

Anthony Olsen
LIfetime Developer - Big Bamboo
23925 posts
788 Thanks
Karma: 433

The administrator has disabled public write access.

8 years 6 months ago

That's just a placeholder I used to post to the Forum. It would be:

src: url('http://siteaddress.com/templates/rasa2/fonts/delta/delta-jaeger-r-medium-webfont.eot');

Steve Pritchard
12 Month Developer
97 posts
Karma: 0

Last Edit: 8 years 6 months ago by Steve Pritchard.

The administrator has disabled public write access.

8 years 6 months ago

Ok got it. I'll really need a link to see why it's not loading. Can you send that across?
Thanks

Anthony Olsen
LIfetime Developer - Big Bamboo
23925 posts
788 Thanks
Karma: 433

The administrator has disabled public write access.

8 years 6 months ago

www.dev3.clearmind.com

cheers!

Steve Pritchard
12 Month Developer
97 posts
Karma: 0

The administrator has disabled public write access.

8 years 6 months ago

Great thanks. I think you just need to add !important after the declaration in the custom.css. The template's inline css is overwriting your css. I will add an option to disable font control in the template settings in a future version.
Thanks

Anthony Olsen
LIfetime Developer - Big Bamboo
23925 posts
788 Thanks
Karma: 433

The administrator has disabled public write access.

8 years 6 months ago

That did it. Thanks!

Steve Pritchard
12 Month Developer
97 posts
Karma: 0

The administrator has disabled public write access.

8 years 6 months ago

Thanks for the update

Cheers
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

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

Cufon ffont integration?

Happy Campers