Streaming live at 10am (PST)

Installing Japanese Fonts


#1

Hello Folks,

I have been working on a website that has pages in English and Japanese. My client has supplied me with the written content in both languages. She wants me to use a particular Japanese font. I have downloaded the font and attempted to install it through the Webflow dashboard. The problem is that the Japanese font file is 15MB and Webflow allows no more than a 2MB font file upload.

I don't know how to code so I searched online to find out how to add a font family in the CSS (I am not sure if it is correct; please view the code on the Japanese Home page) and I have added it to the Home Page of the Japanese section of the website. I realize that does no good if I do not provide the web fonts on the server. The website will not be hosted through Webflow. What is the best way for me to go about this? Should I upload the fonts to the server after importing the Webflow files? If so, do I put them in a font folder? Do I need to add additional code for these to be "connected" to my Webflow files?

As you can see I am really confused and getting desperate because the website should be launched today!

Thanks in advance for your help. Here is the share link: https://preview.webflow.com/preview/paptaketest?preview=11eab34bd1713d002f1e071d43fad9ff


#2

Hey @stuzz

In terms of the font file that is 15MB. Does this file include different weights and is there anyway your client could supply a Webfont for the work? I only ask this becuase a 15MB font file is certainly not optimised for the web and would cause serious bandwidth issue regardless of whether you were able to load it via Webflow or any server really. In my humble experience as soon as you start creeping to the 1MB you need to strip something back so 15MB just seems really impractical. Keep me updated, I've had a similar issue would love to help.


#3

Hi Tim,

Thanks for your reply. Yes, 15MB is very large for a font file. The web page she directed me to for the font is: http://www.google.com/get/noto/#sans-jpan

From what I've seen, all the Japanese fonts are large files due to the pic-like style of them. The best thing would probably be to allow the Japanese viewers to view the site with the default Japanese fonts they have installed on their computers. Just to make sure, you can see the site in the Japanese language, yes?

The site: http://paptake.webflow.io/japanese/home

It seems like she wants it in a Japanese font other than the one she wrote it in. But if this is so, do you think the solution is to have her write it in the font that she wants to be online. Because we are now able to view a Japanese font (the one she wrote it in I presume).

Thanks, Tim.


Adding a Japanese typeface
#4

Yea definately @stuzz allowing a user to view the site in their installed native language font is ideal and best practice.

What font are you currently using for the japenese on your site currently? Is it Open Sans?


#5

I am not sure. My client provided it. It looks like I need to let her know about the font file size problem I am facing. If she insists on having such a large font download I'll see about signing up for an Adobe Typekit account. I just came across this page: http://blog.typekit.com/2015/06/15/announcing-east-asian-web-font-support/ and will look into it. I know that Adobe Typekit allows for one free font usage.


#6

What my little decoding in Inspector on your site it definately looks like Open Sans is currently being used. In which case you may not have so much of a problem afterall. The Typekit route also would be very beneficial considering they host the font files for you smile


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.