Japanese custom font

  • Hello,

    I am making a website mostly in japanese and french, everything is going ok except when I try to add a custom font for japanese, the default one is not really good looking and I would like a nicer one.

    I am actually looking at https://www.fonts2u.com/kaorigel.font (oddly enough the downloaded demo file is not showing any japanese characters, but only latin characters even after using font squirrel generator)

    I added the font face rule in my CSS

    @font-face {
    font-family: ‘kaorigelmedium’;
    src: url(‘kaorigel-webfont.eot’);
    src: url(‘kaorigel-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘kaorigel-webfont.woff’) format(‘woff’),
    url(‘kaorigel-webfont.ttf’) format(‘truetype’),
    url(‘kaorigel-webfont.svg#kaorigelmedium’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }
    changed the font-family in the CSS with ‘kaorigelmedium’ but nothing changed and the default font prevails, I have done some research but nothing so far.

    I would really appreciate any info that could me solve this issue

    Thank you in anticipation

Viewing 13 replies - 1 through 13 (of 13 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    After adding that font face, have you then assigned a HTML element that font?
    E.g;

    h1 {
 font-family: 'kaorigelmedium';
}

    Do you have the font files in /wp-content/themes/yourTheme/?
    If yes, you should link them likewise in the @font-face code.
    E.g;

    @font-face {
font-family: 'kaorigelmedium';
src: url('/wp-content/themes/yourTheme/kaorigel-webfont.eot');
src: url('/wp-content/themes/yourTheme/kaorigel-webfont.eot?#iefix') format('embedded-opentype'),
url('/wp-content/themes/yourTheme/kaorigel-webfont.woff') format('woff'),
url('/wp-content/themes/yourTheme/kaorigel-webfont.ttf') format('truetype'),
url('/wp-content/themes/yourTheme/kaorigel-webfont.svg#kaorigelmedium') format('svg');
font-weight: normal;
font-style: normal;
}

    Thread Starter gond78

    (@gond78)

    Thank you for your reply!

    as for the HTML element yes I have them all assigned

    h1 span, h2 span, h3 span, h4 span, h5 span, h6 span, h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong, .inner_main .widget ul.testimonials li p {
	font-family: 'kaorigelmedium', 'customFontBold', Arial, sans-serif;
	font-weight: normal

    etc

    However it seems I haven’t linked properly as you suggested, I will give it a go now.

    Thanks again

    Thread Starter gond78

    (@gond78)

    Well it doesn’t seem to be working

    @font-face {
    font-family: 'kaorigelmedium';
    src: url('/wp-content/themes/ETHERNA/css/kaorigel-webfont.eot');
    src: local('?'), url('/wp-content/themes/ETHERNA/css/kaorigel-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/ETHERNA/css/kaorigel-webfont.woff') format('woff'),
         url('/wp-content/themes/ETHERNA/css/kaorigel-webfont.ttf') format('truetype'),
         url('/wp-content/themes/ETHERNA/css/kaorigel-webfont.svg#kaorigelmedium') format('svg');
    font-weight: normal;
    font-style: normal;

    is what i changed but with no result, I don’t understand why at this point, been at it for a couple of days now :S

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you link the webpage where it’s not working?

    Thread Starter gond78

    (@gond78)

    sure thing
    ecolebonjour.com

    page is protected from viewers at the moment

    user: admin
    password: portugal78

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Which bit of the text is supposed to have that font?

    Thread Starter gond78

    (@gond78)

    well pretty much all that is in japanese I would like to use that font, body and menus, everything pretty much, the default isn’t really good looking and I was looking at replacing it all

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I think there’s something wrong with that font family. Where was that font downloaded from?

    Thread Starter gond78

    (@gond78)

    https://www.fonts2u.com/kaorigel.font

    i got it from there

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’d stick with the file names and CSS given from the @font-face download link on that page and only change the font paths to match yours.

    Thread Starter gond78

    (@gond78)

    I think I have tested that also, but i’ll give it a try again now

    thanks a lot!

    Thread Starter gond78

    (@gond78)

    yeah nothing, I will search for another japanese font, and test it, it’s quite difficult to find a good one.

    thanks a lot for your help, I will check back once I have tested it with another font, I really appreciated your help!

    Thread Starter gond78

    (@gond78)

    I just read something interesting about japanese font, the reason why my font is probably not working is because japanese is based on 3 different characters, hiragana, katagana and kanji ( chinese characters).
    the font I have only has 2 characters, Hiragana and Katagana, there must be some conflict because in japanese all the characters are used, and so is my website, it’s also probably why most content in japanese websites are using very blunt font style ( same as in mine) the font file would be too big to load and use too much brand with in the end (5M is apparently very common for fully supported japanese font, the only fancy characters are actually loaded thru .gif files.

    well I think I got it why it’s not working, I thought it would be interesting to share it with you, thanks again for your time and your precious help.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Japanese custom font’ is closed to new replies.