First things first, pick out the custom font you want to use. You can choose from Google Fonts, Adobe Fonts, or even a font file you have on your computer, like .ttf or .otf.

If you're using an online font library like Google Fonts or Adobe Fonts:

• Head over to the font library.
• Find the font you like.
• Copy the URL they give you for embedding the font in a web page.

If you're using a local font file:

• Make sure the font file is uploaded to a server where it can be accessed.
• Get the URL where the font file is hosted.

Open up your WeWeb project where you want to use this custom font.

In the WeWeb interface, find and click on the “Global Styles” option from the left-hand menu. This is where you can manage the styling for your entire project.

Within the Global Styles section, look for the option to add custom CSS. Usually, this is under a section labeled as “Custom Code” or “CSS”.

Paste the @font-face declaration for your custom font. This includes specifying the font-family name, the source URL, and any other relevant details. Here’s an example:

@font-face {
  font-family: 'CustomFont';
  src: url('https://example.com/path-to-your-font-file.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Replace CustomFont with the name you want to give your font. Replace the URL with the URL of your font file.

After adding the custom CSS, you need to apply the font. You can do this by setting the font-family property in the CSS for specific elements, or for the entire project. For example:

body {
  font-family: 'CustomFont', sans-serif;
}

This will apply the custom font to the entire body of your project. You can also target specific elements:

h1, h2, h3, h4, h5, h6 {
  font-family: 'CustomFont', sans-serif;
}

After applying your custom font settings, be sure to save your changes and publish your project. Review your website to ensure that the custom font is being displayed correctly.

If the custom font does not appear as expected, check the following:

• Ensure the URL of the font file is correct and accessible.
• Validate your CSS for any syntax errors.
• Verify that the font file is properly uploaded and not restricted by permissions.