Embedding fonts (with services like FontStand ?)

Design help Custom code
1

Hi all,

I really love Webflow, it’s fantastic, but man sometimes I wish it would it would incorporate with other basic services better.

I really love FontStand, and using it alot for print work. It offers trials of Webfonts too, of course, but the font must be embedded.

When you “rent” a font it basically asks you two easy things

embed this in the tags

<link rel="stylesheet" href="https://webfonts.fontstand.com/WF-021605-255e89c3ed228b80bdec3124cbd96a41.css" type="text/css"/>

and then the CSS

element { /* replace with your selector */
	font-family: "Julien Bold Round";
	font-weight: normal;
	font-style: normal;
}

Is there anyway to do this with webflow? thanks!

1 Like
2

Yes, there is a way.

Drop an Embed element and use this code:
<style>
body { font-family: "Julien Bold Round"; font-weight: normal; font-style: normal; }
</style>

3

Ah awesome! I got it to work.

Just for anyone else trying to do this →

The tags MUST be copied onto the page in an HTML embed, NOT between the tags in settings.

It wasn’t working for me when I added the code in the “custom code” panel on settings (which is what Fontstand instructs you to do, or put it inbetween the tags anyway).

5

Hi! I’m having a very similar problem and I think I’m following all of the above instructions but it’s still not working. Maybe someone can help me figure out what I’m doing wrong?

I’ve added the domain addresses to the Fontstand app (see image 1), and generated the two links to paste into Webflow’s custom code. Here are the links:

Link 1:
<link rel="stylesheet" href="https://webfonts.fontstand.com/WF-066500-f3cc9af295dffe3e6455558adaf5edb2.css" type="text/css"/>

Link 2: (actually there are many more elements but I’ll demonstrate with just 3)

h1, h2, h3 { 
	font-family: "Italian Plate No2 Condens85701";
	font-weight: normal;
	font-style: normal;
}

I pasted both of the above links into the Inside head tag in the pages Custom Code settings (see image 2), and I also pasted the style code into a HTML embed element on the page (see image 3).

Here’s a read-only link to the page.

Any help is really appreciated!
Thanks :slight_smile:

Image 1
Image 11440×900 69.3 KB

Image 2
Image 21440×900 156 KB

Image 3
Image 31440×900 151 KB

6

Hi everyone, and thanks for using Fontstand with Webflow.
We just discovered this discussion and will try to add some advice based on our own testing. Please let us know if you have any experience to share:

  1. you will need an active Site plan to be able to embed custom code in Webflow.

  2. in the Fontstand app Webfonts section please add both *.webflow.com and *.webflow.io domains before generating your webfont CSS, to be able to design and test the website on these development domains.

  3. Don’t add any Custom code in your site’s general settings, while this could work on the final website, your fonts would not show up in the Designer view.

  4. Instead create a new empty Code Embed element on each of your pages by opening the Add panel and adding a Code Embed element to the Webflow canvas. See this link for more info on adding the element: Custom code embed - Webflow University Documentation

  5. Copy and paste both parts of Fontstand generated CSS code into the empty Code Embed Editor.
    – Paste the "<link rel=“stylesheet” href=“https://webfonts.fontstand.com/WF…” part of the code unchanged.
    – Also paste the CSS properties part just after the first part of the code. You need to edit this code by adding the and tags just before and after the code. You will also need to replace the “element” selector with your own, for example “body, h1, H2, h3” etc.
    – Save & Close the editor window.

Your complete code will look like this:

H1 { font-family: "Greta Text Pro Regular"; font-weight: normal; font-style: normal; }

Please note that you will need to add this code embed element to each page of your website.

If you find a better way to use the Fontstand fonts with webflow, or if you find an error, please let us know. You can also send an email directly to support@fontstand.com.