Using different fonts with HTML code

  • 0
  • 1
  • Question
  • Updated 7 years ago
  • Answered
  • (Edited)
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members.

How to add html font code to a header. When I add the code for Century Gothic all I see is the code. Any suggestions. Also will Century Gothic be added to the font list as its very limitedÉ
Photo of Maria5631


  • 1,624 Points 1k badge 2x thumb
  • frustrated

Posted 7 years ago

  • 0
  • 1
Photo of Aubrey T

Aubrey T

  • 15,316 Points 10k badge 2x thumb
Hi Maria -

I completely understand your frustration with our limited choice of fonts. We are aware of this and will let you know if/when we add new choices to our drop down menu.

Regarding how to add html code, please check out this link -- especially the first response with the @font-face css script.

You'll need to find a source URL for the Century Gothic font, to replace the URL in the example, but once you do, it should work on most browsers.

Add this code to your header, replacing the source URL with the font you want ot use:

<style type="text/css">
@font-face {
font-family: "My Custom Font";
src: url( format("truetype");
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;

then everytime you want to add text to your site, you'll have to add it using the HTML element (insert > more > HTML), using this code:

<p class="customfont">Enter your text here</p>

Hope that helps!

Note: The link above is not from an official partner, nor have we done extensive testing on these products. We do not guarantee that instructions from this site will work for all users and cannot provide specific instructions or troubleshooting with these third-party websites. Use of these tools and services must be undertaken at your own risk.
Photo of Don Ell

Don Ell

  • 120 Points 100 badge 2x thumb
I added an HTML table on one page, and it won't display in Edit mode, only Preview and online. Does this mean that everything I do in a non-Homestead (your selection is lousy, BTW; they wouldn't excite an hysteric).font will likewise not display in anything but preview and online modes? If your code is written in HTML, why won't it show HTML?

Next, access to the "other" font(s) that I .want to use -- I saw something about tying into a website as a source of the font. I didn't see anything like that in the sample above, so how is that done? And, since I'm not sure where all my fonts came from, and I don't have a (very expensive) Adobe license, do you have useable sources?

Finally, why can't I add additional fonts for my site only (e.g., style sheet)? Surely every Homestead site doesn't use the same one!
Photo of Ehsan Zaheer

Ehsan Zaheer

  • 39,954 Points 20k badge 2x thumb
Hi Don,

-HTML elements do not display anything (other than the html element box) in edit mode, you'll only be able to see the end result in preview mode or the published site.

-Using HTML to display a specific font means you'll need to add the html code in addition to the text, all within the html element.
You'll need to find the specific url for the font you'd like to use and then can edit the code above that Aubrey suggested (or use another html code if you'd like).

After adding your text to the element, you should be able to see it in preview or on the live site once you've published.

-The sites have their own default style sheet - However, you're welcome to add your own CSS Style Sheet and call it with html.

*Note: We do not have instructions for adding your own style sheet, nor troubleshoot or support html.


If you're not familiar with creating your own style sheet, here's a html tutorial by Tizag that you might find useful.

Please note that if the font specified is not installed on the computer that is viewing your site, then it will display whatever they've set as the default font.

I hope this info helps further clarify, thanks!


This conversation is no longer open for comments or replies.