Streaming live at 10am (PST)

Adding a Japanese typeface


#1

Hi
I’m looking to embed a Japanese typeface but I can’t because of the size the size restriction by Webflow.

I’ve found a few posts about this in the forums but they never got answered:
Example one
Example two

Google fonts it suggests this coding:
HTML
link href=“https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css” rel=“stylesheet”

CSS
.wf-roundedmplus1c { font-family: “Rounded Mplus 1c”; }

I’m a bit confused how I can add that to the custom code and have that font as an option in the designer? Can anyone help me with this?

Many thanks,
-Justin Marazita-


#2

@cyberdave, You suggested using custom CSS to point to an asian font in this forum question.

How does one go about doing that and is it a selectable font in the designer after you point to the CSS?


#3

@koskimaa are you able to help out here?


#4

Not much help I’m afraid, I (like most other web designers) leave the jp typeface up to the client (font inherit) because of the sheer sizes of Japanese fonts. Mplus1p should be under 2mb per weight though?


#5

Is it possible to strip them down from weights not in use and make the file size smaller that way?


#6

@koskimaa, it says the .ttf is 1.5mb when I download it but somehow changes to 3.5mb once downloaded! So annoying.


#7

Try these and let me know if they work:


#8

@koskimaa, Those work great size-wise… BUT I was wanting to use the rounded mplus1c to match the other rounded English font I was using for the English text version.

How did you get those as a smaller file? Maybe I could reduce the rounded version myself? Or if you could do that with the rounded version that would be amazing!

I truly appreciate the help.


#9

Hmm, I didn’t even know there was a rounded version. Do you have a link?


#10

@koskimaa, I have the direct downloads from the google CSS here. I just need the light and regular versions.

http://fonts.gstatic.com/ea/roundedmplus1c/v1/RoundedMplus1c-Light.ttf
http://fonts.gstatic.com/ea/roundedmplus1c/v1/RoundedMplus1c-Regular.ttf

I also found this link but not sure how it differs from the direct downloads exactly:

Thanks


#11

They end up 3.3 mb each on my end here too, which is too bad… pretty cool fonts and I’d like to be able to use them in future projects as well… we should try to figure out a way with calling it through css or some other custom code and have a tutorial or something.

Basically what I know is, google says:

Here is the html:
<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />

Here is the css:
.wf-roundedmplus1c { font-family: “Rounded Mplus 1c”; }

However, I have no idea what to do with these strings of code or where to put them. Could anyone help out with this?


#12

Hi @esoteric_designs,

I was the person asking for help regarding Japanese fonts (about 3 years ago), your “Example two” of the original post. I ended up using a Japanese font from Typekit, but I don’t know if that is the way you want to go. It was the easiest solution for me because trying to make it happen with code makes me dizzy :crazy_face:


#13

@stuzz, I was thinking of going down that route. Just sucks when you find the perfect font and can’t use it. I can upload the .woff and .eot versions, but I need to look into any browser limitations for those file extensions. It would be great if I could embed the .ttf.


#14

woff looks like it’s pretty well supported. At least ver 1.0 (don’t know how to tell the difference between 1.0 and 2.0)

https://caniuse.com/#search=woff


#15

@koskimaa, thanks for that! I’m a real stickler about supporting as many browsers as possible. I used to work for a company that still built things for IE 8…


#16

Yeah I can relate to that… these days I don’t guarantee any support for IE unless the client specifically asks for it, in which case they have to pay extra for that as a “feature”, since it makes everything much more complicated.

Edge, Firefox, Safari, Chrome is the minimum.

EDIT: Looks like woff 2.0 files are just named woff2 unless I’m mistaken, so if your file is ends with the filename .woff it should be 1.0 and in return, pretty well supported.


#17

hi @esoteric_designs & @koskimaa

I’m the one who make Example one thread about CSS from google font several month ago,
if you still looking how to do that to link the CSS and custom code rather than upload the file,
I’d like to share the answer and it works!

Here is the thread:


#18

Thank you so much for sharing this, @yuan! I may not have known about this unless you shared it here as well, so thank you again! Will most likely use this in future projects. Have a great week!


#19

You welcome koskimaa! all credit goes to @vincent ! :star_struck:
Have a great week as well!