Adding fonts from the Monotype Library Subscription / MyFonts Webfonts Kit

[WinstonStruye]

Read-Only site
https://preview.webflow.com/preview/josh-testing-3?preview=f293161510f74d6cf75d161046ae49a7

Published site
http://josh-testing-3.webflow.io/

Hey! I just started with Webflow and am really excited. I’m kinda a dork for typography as well, just an FYI.

I purchased the Monotype Library Subscription which does enable all of Monotype’s Library to be used as web fonts. But I’m having trouble figuring out how to get some of these fonts into webflow.

To download web fonts I’ve created a "Web fonts Kit on MyFonts. This includes a .css file and a series of .eot files. However, these .eot files have been renamed with sequences of numbers and don’t work in WebFlow.

There is a “start here” HTML web page that comes with the kit, but reading it over I can’t see how to apply it to webflow. It says I need to reference the .css file that it contains. So how do I make this work in Webflow? I only see ways to upload font files. (Yes, I’ve read through this page )

When I upload the “.eot” files that I have in the WebFonts kit, it doesn’t load the font file in webflow? Maybe this has something to do with the question listed in the FAQ below?

Can any other type dorks help me out here? Thanks in advance!

(Also, for reference - here some screenshots of what it says to do on the “Start Here” file that comes with the kit)

Screenshot 1

Screenshot 2

Screenshot 3

[garymichael1313 (G.J.)]

Yeah font libraries need to be loaded on your own server, ehh I know. Sorry, but that’s what Step 1 is telling you. Honestly, bud there are much easier ways to do this.

I would use Google or Typekit. They have the libraries on their server and you only need to add the fonts in your project settings and done!

I know you paid for this, but trust me, I would get a refund if you can. Then use one of these services. Obviously, you won’t have downtime or hardly any problems. One is Google, the other is Adobe, so uh yeah pretty solid service.

Dang I hope you can get a refund. Unless you don’t mind managing fonts on a server. If you already have a server set up then it’s possible, but I would not buy a server just for fonts.

JUST TO BE SURE - What service did you buy this from exactly? I’ll go look at their site for you to check for certain.

[garymichael1313 (G.J.)]

@WinstonStruye, unless they offer another way, here’s some more detail from their licensing. Not sure how you can get around this? You don’t have access to Webflow server.

–
https://www.myfonts.com/info/mls/

How are fonts installed and managed on my computer?
Subscription desktop fonts are installed in a secure location on your computer through SkyFonts, a handy app that allows you to sync fonts with the click of a button. Due to licensing restrictions, we do not allow access to these folders. We also do not allow copying, renaming, or moving of trial or subscription font files. Subscription fonts can be easily removed when you are no longer using them. When your subscription expires, SkyFonts removes the fonts from your machines.

What operating system do I need?
On Mac, you’ll need OSX 10.7 or later. On Windows, you’ll need Windows 7 or later.

Where do the fonts go on my computer?
Fonts are installed in a secure location on your computer. Due to licensing restrictions, we do not allow access to these folders. We also do not allow copying, renaming, or moving of subscription font files.

–

[WinstonStruye]

Thanks for the quick reply @garymichael1313 !

Arg, that’s a real bummer. I’m well aware of Typekit and Google’s services, but unfortunately, neither of those have really great font offerings =( . For example, what if I want to use Helvetica Neue? Seems like I should be able to do that (I wouldn’t use Helvetica, that just an example of one of many classic typefaces I’d like to use) …

The service is literally just the Monotype Library Subscription, seen here
http://www.monotype.com/fonts/monotype-library-subscription/
(NOTE - sorry, written before you’re replay)

Dang, there’s really no way, even I have the .eot files? I’m writing them an email now, is there anything you can suggest for me to say to them that would maybe help?

Super thanks again!

_Winston

[garymichael1313 (G.J.)]

Yeah I understand bud, I’ve had this issue before. What you can do. A workaround!

Keep the subscription
But download the fonts to your computer (All variations, eot, etc)
Then upload them in Webflow project settings individually
You probably should add a fall back (I did this with Goku)

It works! However, if the something happens to the font, you won’t know until it’s visible on live site.

[WinstonStruye]

Dang that’s not working for me because it seems I only have the .eot font. Do you mind how I ask where you got your font files? Specifically the .woff font file?

Here is my site btw, you can see it’s just displaying in Arial, not in Harmonia Sans.
http://josh-testing-3.webflow.io/

EDIT - I tried converting the .eot file on onlinefontconverter.com and just got this

Weird… if I could somehow have access to that .woff file…

Thanks again for your help btw!

_Winston

[garymichael1313 (G.J.)]

Which font? Some of them I had to use an online converter. Yeah that .woff will be needed for IE & other browsers (I think it’s IE if I remember).

The Goku font was downloaded from a site which had the entire collection in the zip. Man, I feel for ya. I battled this forever it seemed like. Truly, I would just make a concession and use Google. Another issue, if the font developer makes changes, you have to download them again. The new font won’t get pushed out. Not a big deal, but just another couple of steps.

Yep I have a MyFont membership too. I can’t remember if they have the converter or not, ask them. I know Font Squirrel does: https://www.fontsquirrel.com/tools/webfont-generator

I’ll look in my archives (I did this a while ago) and try to find where I used converters that worked. And where I got these fonts.

[WinstonStruye]

WOW! After hours and hours of going back and forth… I think I found a workaround that works (unbelievable!!!)…

For those in the future. Follow the steps of making a “webfonts kit” in MyFonts then -

Make sure this box is UN-checked when downloading files.

If this box is checked ON - it will only provide you with a .eot and/or .svg font , and neither of which will work in Webflow. You can convert the .svg font file with online font converters, but that often ends up in broken fonts (I tried this and got ugly results with curves that were messed up - ex. being a lowercase “a” with a chunky non-curved counter.)

If this box if checked OFF - it will provide you with .ttf and .woff files. Which can be uploaded into Webflow and then they work.

(In hindsight, I should have realized that sooner, context clues should have told me that “encoding” files meant they wouldn’t be simple files. You can tell I don’t come from a programming background!)

-BUT it’s not a real solution-

@webflow this provides a lackluster solution - the naming convention is all messed up (it uploads as simply as a string of numbers, I have to remain them all individually). This is less than ideal considering I’m paying for the font licenses and the license to use webflow. Shouldn’t this be easier? I would think that a platform for professional designers (who presumably use great fonts) would make it easier to access a subscription from the largest type foundry on the globe no?

Anyway, glad I finally found a work-around for this. Thanks for your help @garymichael1313!

[garymichael1313 (G.J.)]

Awesome! Whoo Hoo! … Aww dang premature… Oh okay you can still do it. Hope it works out.

Actually, I’ll be honest, adding custom fonts has never been easy. And if it wasn’t for the 2 biggest players, it would be virtually impossible with costs. Google & Adobe, make the price for everyone else what it is. Imagine if they leave, Font Library services would gauge for 40-50 per month - and they would get it - easy! They are playing an integral part… for now.

Holler at me, if you need any help. Have a great weekend.

Go Pats!

[WinstonStruye]

Interestesting @garymichael1313! I think you’re right they are playing an integral part, and atleast Webflow has them

Big thanks again for your help! Will reach out again if needed.

[garymichael1313 (G.J.)]

Not a problem, have a great week!

[Danken (Daniel)]

@WinstonStruye @garymichael1313 Watch out though with this workaround as it might violate the terms and thus may be illegal. This workaround seems to not track the page views for the fonts and that’s essential for the license. I’ve been dabbling with a solution for this - will update here if I get that part to work.