Can You Add Custom Fonts to Weebly? Adding Custom Fonts to Weebly

by

How to Add Custom Fonts

Weebly allows adding custom fonts. To add a custom font, first find and download a font. Then in the Weebly editor, click "Theme" and "Custom CSS." This opens a window to input CSS code. To add your font, copy and paste this code, replacing "YourFontName" with your font name and "YourFontURL" with the font’s URL:

@font-face {
font-family: 'YourFontName'; 
src: url('YourFontURL');
}

You can also change individual elements’ fonts with custom HTML and inline CSS. The embed code element allows this.

Using Specific Custom Fonts

To use a specific custom font not available in Weebly, get the font files and upload them. Go to Theme > Edit HTML/CSS > Assets and upload fonts.

You can add fonts to Weebly by adding the following code to your Weebly site:

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Once you have added the code, you can use any of the Google Fonts on your Weebly site by adding the following code to your CSS:

.site-title {font-family: ‘Open+Sans’;}

In order to change the font for a specific text in Weebly, we have to utilize the Embed Code feature. The Embed Code feature allows you to add custom HTML code to the page which you can manipulate in the code editor later.

Frequently Asked Questions

Yes, you can use custom fonts on Weebly!

How do you change the font on Weebly 2021?

Change fonts on Weebly by clicking on "Change Fonts" from the Theme tab to access customization options for font styles, sizes, colors, spacing, heights, or uppercase options.

How do I add a custom font to my website?

To add a custom font to your website:

  1. Download the font files you want to use.
  2. Ensure the font license permits commercial use.
  3. Upload the fonts to a fonts folder on your website.

In your CSS file, use the @font-face rule to refer to your custom fonts:

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/mycustomfont.woff2') format('woff2'),
       url('fonts/mycustomfont.woff') format('woff');  
}

h1 {
   font-family: 'MyCustomFont', sans-serif;
}

This allows the h1 headings to use MyCustomFont.

The process varies slightly across website builders but typically involves uploading fonts and adding CSS. Check your website builder’s documentation for specifics. With custom CSS, you can use custom fonts on any website.

Leave a Comment