Custom Code for webfonts

Design help Custom code
1

Hi, there,

I’ve been trying to embed a webfont I rented on Fontstand to my project. I do not have the file of the font, only the custom code Fontstand provides me so it is synced to the app.

This is exactly the code I’m using:

heading { font-family: "fontname"; font-weight: normal; font-style: normal; }

Is there something wrong with the code? Also, I would like to make this the standard font for headings. Should I style each individual heading or all in once? (I’ve tried both ways)

Thank you!

2

I don’t know if you’re supposed to see the font rendered inside of the designer (and not only on publish) when you embed it inside of a site using code. It’s easy for Webflow to render fonts that are uploaded, or linked through Google Font or Typekit, but not so evident for imported fonts… I never tried I reckon.

The code you’re showing here is only the CSS code for styling, right? This is not a code that will import or load any font on yoursite.

This is a proper CSS code, except .heading must be defined somewhere, it’s not an HTML element.

If the font is the main font of your site you can affect it to the body or HTML.

body { font-family: "name of the font, Sans-serif";}

And deal with exceptions with other fonts.

You can also do

h1, h2, h3, h4, h5, h6 { font-family: "name of the font, Sans-serif";}
3

obviously on top of heading having to be defined (heither h something or a class affected to a heading), the part “fontname” must be edited to reflect the font you wan.

4

Thanks for the reply! I did try and publish it, but it still didn’t work.

For some reason my post did not show the whole code I typed. This is how I link it to Fontstand:

  href="https://webfonts.fontstand.com/WF-023748-2495c6eaa3e969e57d9d3a783c6cf3fe.css" 
  type="text/css"/>

The Fontstand guide does not tell me to write HTML, only to style the CSS. This is their tutorial: Fontstand Blog — Fontstand webfonts easy tutorial

Maybe it is not at all possible to do this on Webflow?

5

Did anyone find a solution to this? thanks =)

1 Like
6

why i cant optimize webfont
can any one help
Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more about font-display.FCPLCP