Trialling fonts from MyFonts

Design help General
1

Hi everyone on the forum!

I was wondering if anyone knew if MyFonts new trial font service works with Webflow? Here’s the new trial service Webfont | MyFonts. I followed the steps on MyFonts to get the font code (screengrab below) but when I added it to my site’s dashboard then went back into designer I couldn’t see the font. (p.s. the font is Avenir so if anyone knows a cheeky way to get this free that would be amazing! haha unlikely I know).

1920×1200 414 KB

Also here’s the font code I uploaded to my dash

<script type="text/javascript">
(function() {
    var path = '//easy.myfonts.net/v2/js?sid=10336(font-family=Avenir+35+Light)&sid=10338(font-family=Avenir+55+Roman)&sid=10340(font-family=Avenir+85+Heavy)&sid=10344(font-family=Avenir+65+Medium)&key=aIGlgf78Nl',
        protocol = ('https:' == document.location.protocol ? 'https:' : 'http:'),
        trial = document.createElement('script');
    trial.type = 'text/javascript';
    trial.async = true;
    trial.src = protocol + path;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(trial);
})();

Thanks everyone and have a great day!
Jamie

2

Hi this code will link the font once the site is previewed or published, but in order to have the font appear in the font list within Webflow designer, you have either to manually upload font files, add google fonts from the dashboard, or link your Typekit account in the dashboard then select kits you’ve been building on Typekits’ end.

So this trial will be, at present time, a bit difficult to use with Webflow. However not impossible. Once your code added, you need to declare new css in custom code, affecting your trial font to some classes. Then use these calses on text in the designer, publish and review.

3

Cheers Vincent!

I saw in this video New Ways to Try Webfonts on Vimeo that the bloke is pointing his new fonts at the header classes, but obviously he’s working directly in code. Any tips on how to do this in Webflow, i.e. declare the new css in the custom code section?

Thanks again,
Jamie

4

You have read all of this don’t you? Custom code in head and body tags | Webflow University

5

Ahh thanks will have a look at that, I think I just got confused when I saw the fella in the video demo changing out the code directly (which I expect is pretty hard to do in Webflow), but I’ll have a crack at pointing the new type styles to my header classes.

Cheers,
Jamie

6

Hey Vincent,

Had another look at this, and I actually have the fonts on my computer in ttf and otf formats. I was wondering, is there a way you know of to convert them to webfonts? I found this http://onlinefontconverter.com/ but was wondering if it might be a little dodgy (potentially full of bugs!)

Any thoughts on getting them into .svg .eot .woff formats?

Cheers man,
Jamie

7

Yes, use http://www.fontsquirrel.com/ online.

However, when you’re in this situation (needing to convert a font) it means nothing good. The good situation is you either find a free font that you can download the web version of, or you pay a licence for the web version of a font and again, you get the all the formats you need right away.

Fonts are very technical to make. Real web versions of fonts are not just converted. A ttf for web is not the same as a ttf for desktop.

By converting a font you automatically, most likely are:

  • breaching a copyright
  • ending up with a non-optimized file (slower to load, possibly affected rendering. I had used a manually converted version of DIN Alternate once. It was bas at aliasing. I later discover I could pay 32 dollars per weight and I needed two. Bought it, worked like a charm.)

And if you’re not breaching a copyright it means there must be web ready formats for this font somewhere.

So from there you have many options before ignoring all of this and convert your own files:

  • find a free font that is matching yours on fontsquirrel
  • find out that you can licence the font you have for the web and get
    proper files for a cheap price on
  • myfont.com or another site
  • use a google font or a typekit font that matches yours

In the end, converting your font is dirty but it works. I’ve done it, it’s possible I’ll do it again (: But do it if you really can’t do any of the list above.

Hope this don’t sound too bad (:

8

Cheers man, that all makes a lot of sense, I was thinking there must be a way to do it, but (like you said) I expected it would be pretty dirty and unreliable!

I’ll buy the fonts from MyFonts as eot evg and woff next week. I’ll probably end up converting fonts for some of my own smaller projects but for this site I bought font will be fine.

Thanks again Vincent!
Jamie

9

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