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.

How to add Meiryo font and use it

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

Hi, Paul.

At goyat.info site, I am using Tahoma font for Japanese and English template. I would like to use Meiryo font for the Japanese template.

en.wikipedia.org/wiki/Meiryo

Could you kindly tell me how to set Meiryo font in Japanese template configuration?

goyat
  • goyat's Avatar
  • goyat
  • 12 Month Developer
  • 521 posts
  • 2 Thanks
  • Karma: 1
Last Edit: 9 years 3 months ago by goyat.
The administrator has disabled public write access.
Sorry I missed this one

Do you still need assistance?

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

A Happy New Year!

Yes, I do!
  • goyat's Avatar
  • goyat
  • 12 Month Developer
  • 521 posts
  • 2 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Goyat,

This is a good issue to cover actually because at the moment it's a little hard to do if you want o have fonts for specific languages.

I have just added a fix in the framework which will output the language tag as a body class eg html.en-GB {} will allow you to target just the English language.

So in the 1.1 version that will be released at the end of today you can do this:

html.js p {font-family:"Meiryo"}

and then use the fontface rule in a custom.css file. This is how we add Font Awesome fonts
@font-face {
  font-family: 'FontAwesome';
  src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
  src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
    url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'),
    url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg');
//  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;
}

Does that make sense?

I will add something better in the future that will allow you to use the built in font control but for now I think this is the quickest solution.

Also I'd be keen to get your feedback on the new framework. You have used alot of our themes now and would value your input.

Thanks Anthony
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
Anthony,

Thank you for your info, but I do not think I can do this.

Should I put html.js p {font-family:"Meiryo"} to custom.css?

At the template, how should I use to add Meiryo font?
I think I need step by step navigation.

Goyat
  • goyat's Avatar
  • goyat
  • 12 Month Developer
  • 521 posts
  • 2 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Goyat,

Sure thing.

I tried to find an installable package for Meiryo but couldnt see it - can you tell me which files you have to use?

Thanks
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
Anthony,

Could you find the font file from below site?

www.microsoft.com/en-US/download/details.aspx?id=24941
  • goyat's Avatar
  • goyat
  • 12 Month Developer
  • 521 posts
  • 2 Thanks
  • Karma: 1
The administrator has disabled public write access.
I cant actually - msu file types are for Pc's it seems.

You actually need to turn the font into a webfont as far as I can gather. Fonts that are installed onto a computer are different from those used in the browser.

This server may be able to produce the correct files for you:
www.fontsquirrel.com/tools/webfont-generator
Thanks
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
Anthony,

If I put meiryo in custom.css, Japanese PC users can see meriyo font in web site.

I just want to reflect meiryo font on Japanese Xero template. Is there a way to do this?

I can not create Meriyo font using your suggested site.

goyat
  • goyat's Avatar
  • goyat
  • 12 Month Developer
  • 521 posts
  • 2 Thanks
  • Karma: 1
The administrator has disabled public write access.
Ah ok thanks - thats a lot easier.

So I had a typo before related to the japanese tag. If you are using the version of Xero I released today you should see a class called ja-JA attached to the html tag.

So this should do what you need:

html.ja-JA * {font-family:"Meiryo", sans-serif}

The Sans serif would be the fall back. Does that work?

Thanks
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
Where should I paste this?

html.ja-JA * {font-family:"Meiryo", sans-serif}
  • goyat's Avatar
  • goyat
  • 12 Month Developer
  • 521 posts
  • 2 Thanks
  • Karma: 1
The administrator has disabled public write access.
a custom.css file
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
I do not think it is working, Anthony.

goyat.info/disclaimer-jp.html
  • goyat's Avatar
  • goyat
  • 12 Month Developer
  • 521 posts
  • 2 Thanks
  • Karma: 1
The administrator has disabled public write access.
Sorry - yes it looks like it's not getting past the inline style.

Try adding !important after that rule or apply the font family like this:

html > body {
font-family: Tahoma, Verdana, Geneva;
}
h1, h2, h3, h4, h5, h6, blockquote {
font-family:"Meiryo", sans-serif
}

#navwrap li a {
font-family:"Meiryo", sans-serif
}

#logo h2 {
font-family:"Meiryo", sans-serif
}

Please let me know.
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
I put the following in custom.css

html.ja-JA * {font-family:"Meiryo", sans-serif} !important

html>body {
font-family: "Meiryo", Tahoma, Verdana, Geneva !important;
}
h1, h2, h3, h4, h5, h6, blockquote {
font-family:"Meiryo", sans-serif
}

#navwrap li a {
font-family:"Meiryo", sans-serif
}

#logo h2 {
font-family:"Meiryo", sans-serif
}

but it is not working.
  • goyat's Avatar
  • goyat
  • 12 Month Developer
  • 521 posts
  • 2 Thanks
  • Karma: 1
The administrator has disabled public write access.
Please log in with the previous id and password and see custom.css.
  • goyat's Avatar
  • goyat
  • 12 Month Developer
  • 521 posts
  • 2 Thanks
  • Karma: 1
The administrator has disabled public write access.
Can you ping the ticket with the details?

And is the aim that absolutely all text on the page is in that script? I see 98% of the page using those characters.

Thanks
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
Anthony,

Please see this Japanese page.

goyat.info/privacy-policy-jp.html

I do not see the font is Meiryo but tahoma. If it is 98% Meiryo, that would be OK, but what I see is only tahoma.

goyat

P.S. Please see the font difference between Meiryo and Tahoma in Japanese as attached.
Attachments:
  • goyat's Avatar
  • goyat
  • 12 Month Developer
  • 521 posts
  • 2 Thanks
  • Karma: 1
Last Edit: 9 years 3 months ago by goyat.
The administrator has disabled public write access.
Right Ok I see the latter. Can you create a ticket or ping the existing one with the up to date details and Ill look for you.
Thanks
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.

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

Happy Campers