How can I use a Custom Font on my website?

Using custom fonts for your website: A step-by-step guide

Custom fonts can add a unique and personal touch to your website. They can help your website stand out from the competition and make it more memorable. If you’re not sure how to use custom fonts on your website, here’s a step-by-step guide:

1. Choose your fonts. There are many websites where you can download custom fonts, such as Google Fonts and Font Squirrel. Once you’ve found some fonts that you like, download them to your computer.
2. Install the fonts. To install the fonts on your computer, double-click on the font files. You’ll be prompted to install the fonts.
3. Add the fonts to your CSS file. To add the fonts to your CSS file, open your CSS file in a text editor. Add the following code to the top of your CSS file:

CSS

@font-face {
  font-family: 'Font Name';
  src: url('font-name.ttf');
}

Replace Font Name with the name of the font that you want to use, and replace font-name.ttf with the name of the font file.

With UltimateWB website builder, just log into your website admin panel and use your Styles Manager to add this CSS coding to the Extras section.

4. Use the fonts in your HTML code. To use the fonts in your HTML code, simply add the font-family attribute to the element that you want to use the font on. For example, to use the font “Bubbly” on a div, you would add the following code:

HTML

<div style="font-family:Bubbly">This is a div using the custom font.</div>

You can also use classes to update your fonts. This can be very convenient and time saving, to quickly update all the fonts with one line update. On your Styles Manager, Extras section for your Stylesheet, just add the CSS coding:

.newfont {font-family:Bubbly;}

This creates the CSS class "newfont" and applies the new font Bubbly to it. 
Then, in your HTML, you would just code:

<div class="newfont">This is a div using the custom font.</div>

Alternatively, you can apply the new font to divs already on your website. In each section on your Styles Manager there is a section to add Extra custom coding. For example, to apply a special font to your Header, you can just add the following CSS coding to the Header Extras section:

font-family: Bubbly;

5. Save your CSS and HTML files. Once you’ve added the fonts to your CSS and HTML files, save them. With UltimateWB, this is as simple as just clicking the Save button at the bottom of the page, on the Styles Manager where you add your custom CSS coding, and on the Add/Edit Pages, where you can update your coding. No need for Step 6 with UltimateWB – skip to Step 7.
6. Upload your CSS and HTML files to your web server. Once you’ve saved your CSS and HTML files, upload them to your web server. No need for Step 6 with UltimateWB.
7. Test your website. Once you’ve uploaded your CSS and HTML files to your web server, visit your website in a web browser to make sure that the fonts are working correctly.

Tips for using custom fonts on your website:

• Use a limited number of fonts. It’s generally best to use no more than two or three fonts on your website. This will help to keep your website design looking clean and professional.
• Choose fonts that are easy to read. When choosing fonts for your website, it’s important to choose fonts that are easy to read. Avoid using fonts that are too small or too difficult to read.
• Use fonts that are consistent with your branding. The fonts that you choose for your website should be consistent with your overall branding. This will help to create a cohesive and professional look for your website.

By following these tips, you can use custom fonts to add a unique and personal touch to your website.

Are you ready to design & build your own website? Learn more about UltimateWB! We also offer web design packages if you would like your website designed and built for you.

Got a techy/website question? Whether it’s about UltimateWB or another website builder, web hosting, or other aspects of websites, just send in your question in the “Ask David!” form. We will email you when the answer is posted on the UltimateWB “Ask David!” section.