Website Building » Wix » Can I Upload My Own Fonts to Wix?

Can I Upload My Own Fonts to Wix?

Last updated on January 6, 2023 @ 2:00 pm

If you want to use your own fonts on your Wix website, you can do so by uploading the font files to your Wix account and then using the CSS @font-face rule to specify the fonts in your site’s stylesheet. This article will walk you through the steps of how to upload fonts to Wix and how to use the @font-face rule.

In order to upload your own fonts to Wix, you’ll need to have the font files saved on your computer. Once you have the font files, you can upload them to your Wix account by going to the “Add Files” section of the “My Files” tab and selecting the “Upload Fonts” option.

GREAT NEWS:

Exciting update! We've collaborated with Wix to offer WBI users with a free plan for all website creation needs - Explore the details here.

After you’ve uploaded the font files, you can use the CSS @font-face rule to specify the fonts in your site’s stylesheet. The @font-face rule has a few different parts that you’ll need to specify:

PRO TIP: If you are looking to add a custom font to your Wix website, be aware that there are some potential risks. First and foremost, custom fonts can slow down your site’s loading speed. In addition, not all custom fonts are compatible with all browsers, which could cause some visitors to see your site using a different font than you intended. Finally, if you are using a custom font that is not available for free, you may need to purchase a license in order to use it on your website.
  • The font-family: This is what you’ll use in your CSS declarations to specify which font you want to use. For example, if you wanted to use the “MyFont” font that you uploaded, you would specify “MyFont” as the font-family.
  • The src: This is where you specify the URL of where the font file is located. For example, if you uploaded the “MyFont.ttf” file to a folder called “fonts” in your account, you would specify the URL as “https://static.wixstatic.com/ujf/myaccount/fonts/MyFont.ttf”.
  • The font-weight: This is optional, but if you want to specify a particular font-weight (such as bold or italic), you can do so here.
  • The font-style: This is also optional, but if you want to specify a particular font-style (such as normal or oblique), you can do so here.

Once you have all of those parts specified, you can then use the font in your CSS declarations by using the font-family that you specified. For example, if we wanted to use our “MyFont” font on all of the headings on our website, we could do so by adding this CSS declaration:

h1 {
font-family: MyFont;
}

And that’s all there is to using custom fonts on your Wix website! If you have any questions about this process or encounter any problems along the way, be sure to contact Wix support for assistance.

Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.