Embedding Font in Wix Studio

Ask the community
,
1

Is there a way to embed a font via @font-face in CSS in Wix Studio?
I am new to Wix and would like to use a custom font for my client. The license only allows for embedding the font and not uploading it. Any help is appreciated.

3

great, thank you! What’s the best way to host font files externally? Does this affect the site’s performance and load times?

5

Hi @Jasmin_Egger,

In Wix Studio, adding custom fonts using @font-face in CSS is not natively supported through the built-in editor. However, there’s still a way to use custom fonts, even if your font license restricts direct uploads. Here’s a step-by-step guide on how to approach this:

1. Host the Font Files Externally
Since you can’t upload font files directly to Wix, you’ll need to host them on an external server. For example, you can upload your font files (such as .woff, .woff2, .ttf) to cloud storage services like Google Drive, Amazon S3, or any other reliable file hosting platform that allows direct linking.

2. Use @font-face in Your Custom CSS
After uploading your font files to the external server, you need to define the font using the @font-face rule in your custom CSS. Here’s an example of how you can implement this:

@font-face {

font-family: ‘YourCustomFont’;

src: url(‘https://your-external-link.com/font.woff2’) format(‘woff2’),

url(‘https://your-external-link.com/font.woff’) format(‘woff’);

font-weight: normal;

font-style: normal;

}

body {

font-family: ‘YourCustomFont’, sans-serif;

}

3. Add Custom Code to Wix Studio
Once you’ve created your custom CSS with the @font-face rule, you’ll need to add it to your Wix Studio site:

  1. Open your Wix Studio editor.
  2. Navigate to the Settings menu and select Custom Code.
  3. Paste the @font-face rule into the Custom CSS section or the Header Code section.
  4. Double-check that the font file links are correct and accessible.