Public Forums 71,145 posts

[sushismb Friend sushismbJoin date: October 2008Posts: 370Downloads:59Uploads:24 Thanks: 86 Thanked: 8 times in 1 posts]

#158916

Hello,

I am using a T3 template theme in Japanese. And therefore, would require Japanese fonts.

How can I change the font-family settings or add a new font?

Thank you very much for your help in advance!

[korb Friend korbJoin date: March 2008Posts: 315Downloads:0Uploads:0 Thanks: 40 Thanked: 48 times in 39 posts]

#372338

Hi,
Here a quick guide:
– find your_template/css/template.css
– within this file find all font-family styles and add your own style just like below:

before

.ja-class {font-family: Verdana, Arial, Sans;}

after

.ja-class {font-family: your-font-goes-here, Verdana, Arial, Sans;}

Please let us know if you need further assistance.

Regards,
Danny

[sushismb Friend sushismbJoin date: October 2008Posts: 370Downloads:59Uploads:24 Thanks: 86 Thanked: 8 times in 1 posts]

#372341

Hello Korb,

Thank you very much for your response.

The template I’m using is the JA PORTFOLIO which is T3 compliant.

I checked the file you pointed but unfortunately, I couldn’t find “.ja-class”.

I’d appreciate your further assistance.

Thank you!

[korb Friend korbJoin date: March 2008Posts: 315Downloads:0Uploads:0 Thanks: 40 Thanked: 48 times in 39 posts]

#372342

That was an example class. You should find all “font-family” in your template.css and add your font in front of the font list.

Additionally, you can use this guide on Firebug on our wikies to identify all other elements you need to change the font for.
http://wiki.joomlart.com/wiki/JA_T3_Framework_2/FAQs#How_to_use_Firebug

Regards,
Danny

[sushismb Friend sushismbJoin date: October 2008Posts: 370Downloads:59Uploads:24 Thanks: 86 Thanked: 8 times in 1 posts]

#372349

Hello Korb,

I got what you mean. So I will have to change the fonts of the font-family in the file.

body {
color: #525253;
font-family: “メイリオ, Meiryo, MS UI Gothic, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Helvetica”;
}

This is what I did adding “” as I need to add Japanese font names (with spaces in between).

If so, does this override any settings done on the backend template control panel?

Thanks!

[korb Friend korbJoin date: March 2008Posts: 315Downloads:0Uploads:0 Thanks: 40 Thanked: 48 times in 39 posts]

#372353

<em>@sushismb 215681 wrote:</em><blockquote>


body {
color: #525253;
font-family: "メイリオ, Meiryo, MS UI Gothic, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Helvetica";
}
</blockquote>

Not sure if using Japanese name (with special characters) of the font will work. I think you have to google for this as I have no previous experience with Asian specific characters.

<em>@sushismb 215681 wrote:</em><blockquote>
This is what I did adding “” as I need to add Japanese font names (with spaces in between).

If so, does this override any settings done on the backend template control panel?
</blockquote>
Yes this can override settings in the back-end as back-end options only allows you to use Google Fonts for western languages.

A hint I can give you though: as not all browsers and operating systems have the Asian specific fonts, you have to use your fonts into your template folder to make sure they are loaded on all browsers for all users in the www. You then must use this style coding in templates.css


@font-face {
font-family: 'your-font';
src: url('your-eot-font.eot'); // this is where you have to specify relative path to your font
src: local('☺'), url('your-font.woff') format('woff'), url('your-font.ttf') format('truetype'), url('your-font.svg#webfontAOKTlZ8N') format('svg'); // again this is where you have to specify relative path to your fonts
font-weight: normal;
font-style: normal;
}

You can use this generator for your-font here
http://www.fontsquirrel.com/fontface/generator

Let me know if this was helpful 😉

Regards,
Danny

1 user says Thank You to korb for this useful post

1. sushismb

[carynh Friend carynhJoin date: January 2011Posts: 25Downloads:0Uploads:1 Thanks: 5 Thanked: 2 times in 1 posts]

#373328

Danny, Thanks for that.

So “your font here”: Without quotes for single word names, but with quotes for like “Droid Sans”?

And, can Google Fonts be mixed and matched here, and will override the Helvetica, etc. (Because I am having an IE7 font problem which seems related to local fonts).

Is there some directive to block using local fonts? Only use local fonts in a desperate emergency? After dealing with my client telling me in detail about this italics issue in IE, I am dreaming of my site rendering in the same font on all browsers. If I name only one Google font, and for some reason the Google font server is not accessible, what happens? I guess a local/browser style sheet will take over, like normal.

Is there any single JA document about these issues?

Thanks!

[korb Friend korbJoin date: March 2008Posts: 315Downloads:0Uploads:0 Thanks: 40 Thanked: 48 times in 39 posts]

#373360

The service here actually is the best solution if you want to use a custom font on your website
http://www.fontsquirrel.com/fontface/generator

You can google around but still you can get to the same resource.

Regards,
Danny

[carynh Friend carynhJoin date: January 2011Posts: 25Downloads:0Uploads:1 Thanks: 5 Thanked: 2 times in 1 posts]

#373732

Actually, if you re-read my question, FontSquirrel sees too exotic.

I just want the advertised features to work (See http://www.joomlart.com/forums/topic/google-fonts-not-functioning/ ) and to know where I can find some documentation.

Thanks!

[korb Friend korbJoin date: March 2008Posts: 315Downloads:0Uploads:0 Thanks: 40 Thanked: 48 times in 39 posts]

#375505

<em>@carynh 216975 wrote:</em><blockquote>
So “your font here”: Without quotes for single word names, but with quotes for like “Droid Sans”?
</blockquote>
Yes

<em>@carynh 216975 wrote:</em><blockquote>
And, can Google Fonts be mixed and matched here, and will override the Helvetica, etc. (Because I am having an IE7 font problem which seems related to local fonts).
</blockquote>
Google fonts cannot be mixed with EOT ot any other font replacements, GFonts are just GFonts, that is why they have separate administration panel in the profile configuration.

<em>@carynh 216975 wrote:</em><blockquote>
Is there some directive to block using local fonts? Only use local fonts in a desperate emergency? After dealing with my client telling me in detail about this italics issue in IE, I am dreaming of my site rendering in the same font on all browsers. If I name only one Google font, and for some reason the Google font server is not accessible, what happens? I guess a local/browser style sheet will take over, like normal.
</blockquote>
You can use what ever fonts you want for each and every element you need. Just open your-template/css/template.css and find any font-family declaration and add your desired font in front of the fonts list.

<em>@carynh 216975 wrote:</em><blockquote>
Is there any single JA document about these issues?
</blockquote>
Right now this is the only documentation for GFonts
http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Guides#Google_Font_API_Settings

Regards,
Danny

[Author]

Posts