Image Source

Weebly is a free and simple to use website builder, which enables you to create an online store, a website, or a blog. You can find customizable domains, easy-to-use tools, and templates of any type.

If you choose the right font, it is possible to make your website look beautiful and interesting. The use of the correct font can make or break your website. After all, fonts are a crucial component of website designing so that users can enjoy better readability.

Every font has default color and font options built-in and yet you are not just stuck with them. It is possible to change the appearance of any text on your website by going to the Theme tab. The article explains about Weebly how to change the font. There are different ways to change and use fonts on the Weebly site.

Weebly how to change font

Here are the different ways for changing fonts on the Weebly site:

1. Use default Weebly choices

2. Use external font stylesheets such as Bootstrap

3. Customize individual elements

4. Host custom fonts on the Weebly site

5. Change font style for all similar elements on a webpage

1. Use default options in Weebly to change fonts

After you have switched on to the Weebly editor, go to “Theme” and then the “Change Fonts” menu. Choose “Design Options” to see all elements appearing on the panel on the left-hand side. When you move the mouse over an element, the corresponding element will be highlighted on the page.

Choose the element for which the font style has to be changed. The theme’s default font family will appear as “Default”. You have to click on the drop-down menu for choosing your site’s font family.

Immediately, the elements on that page will change as the new font family will be applied to them. All the fonts available are classified into these font families:

i) Serif-Times New Roman, Georgia, etc.

ii) Sans serif-Raleway, Ubuntu, Verdana, etc.

iii) Handwritten-Sofia, Comic Sans, etc.

iv) Monospace- Courier New, etc.

v) Decorative-Spirax, Flux, etc.

vi) Bold Block-Bebas, Impact, etc.

vii) Size-The size of the font for the selected element can be decreased or increased

viii) Style- normal, default, italic & italic, italic, and bold

ix) Color- The font color to be changed

x) Letter spacing- Adjust the spacing between the letters

xi) Uppercase- You can switch off or on the uppercase conversion. For instance, all “Title” elements on a website may use uppercase when this option is enabled

xii) Reset- All characters are reset to the theme’s default setting

xiii) Line Height-The line height between the 2 lines of the chosen element can be adjusted

However, an important point to note here is that when the default settings are changed, there is an impact on the entire website. The changes can be viewed within the editor. For instance, if you change the title element’s color to red, all title elements used in the website will be in red.

Another thing to understand in this context is that the fonts for your site can be changed at various levels and in several places. These include the navigation menu, paragraph text, and headlines among others. However, one of the most crucial and most visible element is the website’s paragraph text. We will now see how to change the font of paragraph text.

Step 1: In the General section, click on Paragraph Text appearing in the left-hand sidebar.

It is imperative to know that paragraph text controls all text elements’ default font. Also, one can alter the size, font family, color, and weight, otherwise referred to as a typeface. More than one hundred font families are available and they are referred to as a ‘web-safe” font. It suggests that any individual using any computer and any browser can see the font seamlessly.

Step 2: Edit the size of your text. It is usually recommended to keep the size of the paragraph to about 12-16. This is a desirable paragraph size to ensure that the text size is big enough to read. At the same time, it is not that big to produce a screaming effect on the visitors of your website.

Step 3: Edit the weight of your text by selecting from the standard light, regular, and bold alternatives

Step 4: Edit the color of your text by using the color picker or from the list of pre-selected color tiles

Step 5: Now, click on the Font button located near the top to return to the Fonts section. You can select another section for editing.

You may change as many different text elements as you wish. The idea is to accomplish a brand-oriented and seamless feel for your website. It is possible to realize what will be the change in a particular web page when you scroll over each control. Accordingly, there is a blue highlight on the text, which will be altered by your updates.

Time For A Change, New Ways, Letters, Words, Font

Image Source

2. Use external fonts

It is not mandatory that fonts are only used for a website’s text elements. For instance, there are certain fonts used for SVG or scalable vector graphics for adding icons to your website. Some of the examples of SVG icons include Glyphicons and Font awesome that are used for various purposes. You may not host these fonts on the website.

Simply add their relevant link to the stylesheet element and include it within your site settings’ “Header” Code. You may now add any of the icons of font-awesome to a website by using an element called “Embed Code.”

Use the parameter @import CSS

It is possible to directly import an external font stylesheet by using the @import parameter as mentioned below. Go to Theme->Edit HTML/CSS->Assets->main_style.css file.

@import URL(//fonts.googleapis.com/css?family=Open+Sans);

The line helps in importing Open Sans Google fonts that can be deployed for various elements on this website. So, when you add the code mentioned below in the “mailn_style.css” stylesheet file, all the text content on the website will change to “Open Sans”.

Body {font-family: ‘Open Sans’, sans-serif,}

However, make sure to have the @import code in the 1st row of your “main_stle.css” stylesheet. Typically, this technique is used for importing font style from external applications such as Google fonts.

3. Host fonts on your Weebly website

Typically, security policy does not permit to use of restricted resources such as fonts used on a particular domain to be used on another website. You should have the specific font files and upload the same on a Weebly site to deploy custom external fonts. Weebly permits accessing the source files so go to Theme->Edit HTML/CSS->Assets and then upload font files.

It will be better if a new folder is created where all the font files are uploaded for quick reference. After uploading the font files in the same manner as the previous technique, the stylesheet has to be linked to the website’s header section.

<link rel”stylesheet” href==”http://yoursite.weebly.com/files/theme/font-

Use the CSS parameter @font-face

You should use the CSS property @font-face if you are hosting font on a Weebly website and there is no SCC file to link. You can open the Google font URL mentioned in the earlier @import procedure to see how the @font-face property is used.

All your font files should be uploaded under the “Assets” section. Thereafter, link these files by using the CSS parameter @font-face under the stylesheet “main_style.css.”

4. Customize all similar elements on a web page

The above techniques can alter the style of all the pages on your Weebly website. However, there can be certain scenarios when you wish to have similar elements only for a particular page. In such a case, you have to locate the corresponding CSS class to customize the element.

Let us say that you wish to change all paragraph texts’ font family on a particular page to monospace. You have to then include the code mentioned below to your page’s header by going to Pages->SEO Settings->Header Code menu.

<style>

<paragraph {font-family: monospace;}

</style>

}

The CSS class, which has been used for text elements, is a paragraph. An element’s CSS class can be found by going to your browser’s “Inspect Element” choice.

When you use external fonts, the editor will not be impacted by uploading fonts to a site and including custom styles in its header section.

5. Customize font style of individual element

The user may also have to alter an individual text’s font properties including the title element. The Embed Code” element can be dragged and dropped in such a case. Then, include the following custom HTML code in an inline CSS style. As the inline styles are effective on an editor, the changes can be effectively seen on the webpage. Here is an inline CSS programming code to add a custom H1 heading.

<H1 style=”text-align: center; font-size: 26px; font-family: arial; color: blue> It is the 1st Heading of the page</H1>

Customize fonts in Weebly

Users are able to alter the fonts at the style level in Weebly. It means one cannot change an individual piece of text’s font here. For example, if you alter the “Paragraph Text’s” font, all texts having that style will have the new font. However, other font properties of a piece of text can be changed.

Change font of a style

As mentioned earlier, a particular font will be applicable to all texts that are following a particular style. It means when one changes the fonts for the “Headline style, all headlines of that website will have that new font. So, the user cannot alter the font used for an individual text.

Altering the font of a style

Step 1: Click on the tab called “Theme”.

Step 2: Click on the button called “Change Fonts”. You can see the available styles on the screen’s left.

When you go over a style, a blue box can be seen at any part of the page displayed including that style. For instance, if you take the cursor over the “Headline” style, a blue box appears around the headline text.

Step 3: For changing a style, you have to click on the style name, for example, “Headline”.

Step 4: Next, click on the font name of the current style. You will see a list containing all available fonts. Select a font, which matches the feel and look of the business branding.

Step 5: You can adjust the font spacing, color, font size, etc.

Step 6: Finally, go to “Change Font” left and click the back arrow and go back to the font menu.

Changing a piece of text’s appearance

Although you may alter fonts just at the style level, it is possible to alter the text’s appearance for an individual text or at the style level. Text appearance means the text:

  • Size
  • Format i.e. underlined, italic, or bold
  • Color
  • Text alignment i.e. right, center, or left

In the previous section, you saw how to change style-level font. In this section, we will explain how to alter an individual text’s appearance.

Step 1: You have to first highlight the text that you wish to change. You will be able to see a toolbar appearing above the text.

Step 2: You may change the following properties from this toolbar:

  • The size of the text by clicking on either – or +.
  • Text can be underlined, italicized, or bolded.
  • Change the color of the text
  • Creating links
  • If the case is part of a numbered or bulleted list.
  • Edits if made using the toolbar by either using “redo” or “undo” arrows before clicking outside a text box and saving the changes.
  • Any additional formatting and applying the original style to the text by clicking on the symbol “Tx”.

Specific or global font changes in Weebly

As we saw that all font settings in Weebly are universally applied for each element. So, all paragraph elements of your website will be having the same size, color, font, and all other options that you selected for paragraph text.

Having said so, it is still possible to add some adjustments to an individual text. Choosing the right font for your website and help in grabbing the attention of your visitors. The article covered various aspects of Weebly how to change font for your ease of understanding.