Weebly is an easy way to build a site and customize the elements to suit your need. Fonts are important part of site designing to offer a better appearance and readability to users. In this article we will discuss various possibilities of changing and using different fonts on your Weebly site.
How to Change Fonts in Weebly Site?
Following are the ways to change the fonts on your Weebly site:
- Using default Weebly options.
- Using external font stylesheets like Bootstrap
- Hosting custom fonts on Weebly site.
- Changing font style of all similar elements on a page.
- Customizing Individual Elements
Let us discuss each option in detail in the following sections.
1. Default Weebly Option to Change Fonts
Once you are on the Weebly editor, navigate to “Design Options” under “Theme > Change Fonts” menu. You will see all elements used on your site are listed in left hand side panel. Moving the mouse over the element will highlight the corresponding elements on the page. For example, the “Paragraph Text” element will highlight all the “Text” elements on the page as shown below:
Select the element you want to change the font style. The default font family of the theme will be shown as “Default” and click on the drop-down menu to choose the font family for your site.
The element on the page will instantly change with the new font family. And all the available fonts are grouped into the following font families:
- Sans-serif – Verdana, Ubuntu, Raleway, etc.
- Serif – Georgia, Times New Roman, etc.
- Monospace – Courier New, etc.
- Handwritten – Comic Sans, Sofia, etc.
- Bold Block – Impact, Bebas, etc.
- Decorative – Flux, Spirax, etc.
Other Customizing Options
You have many other options for customization, other than changing the font family.
- Style – default, normal, bold, italic and italic & italic.
- Size – increase or decrease the font size of the chosen element.
- Color – change the color of the font.
- Uppercase – switch on or off the uppercase conversion. For example, you can have all “Title” elements on your site are using uppercase by enabling the option here.
- Letter Spacing – adjust the letter spacing.
- Line Height – adjust the line height between two lines of the selected element.
- Reset – reset all changes to the default settings for your theme.
Warning: The change in default settings will have an impact throughout the site and can be seen within the editor. For example, changing the color of title element to red will change all title elements to red throughout the site.
2. Using External Fonts
Fonts are not necessarily to be used for text elements. There are fonts used for scalable vector graphics (SVG) to add icons on your site. Font awesome and Glyphicons are few examples of SVG icons used for multiple purposes. It is not necessary to host these fonts on your site; you can just add the relevant link to the stylesheet under “Header Code” section of your site settings. Below is how to link the font awesome icons to your site.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">Now you can insert any of font awesome icons to your site using “Embed Code” element. Learn more on how to use font awesome icons on Weebly site.
Using @import CSS Parameter
You can directly import external font stylesheets under “Theme > Edit HTML / CSS > Assets > main.less” file using @import parameter like below:
@import url(//fonts.googleapis.com/css?family=Open+Sans);This helps to import Open Sans Google fonts which can be used for different elements on your site. For example adding the below code will change all the text content on your site to use Open Sans.
body { font-family: 'Open Sans', sans-serif; }Ensure to have @import at the first line of you “main.less” file (older themes may use “main_stlye.css” file instead of “main.less” file). Generally, this method is used to import font styles from external services like Google fonts.
3. Hosting Fonts on Your Weebly Site
Generally the same origin security policy will not allow using restricted resources like fonts used on one domain to be referenced on other site. In order to use custom external fonts on your Weebly site, you need to have the font files and upload them on your Weebly site. As Weebly allows to access the source files, navigate to “Theme > Edit HTML / CSS > Assets” and upload your font files.
We recommend to create a new folder and upload all font files inside the folder for easy reference. Once the font files are uploaded similar to the previous method, you need to link the stylesheet to the header section of the site.
<link rel="stylesheet" href="https://yoursite.weebly.com/files/theme/font-file-name.css">Using @font-face CSS Parameter
When you host font on your Weebly site and do not have CSS file for linking then the option is to use @font-face CSS property. You can see the use of @font-face by opening the Google font URL used in the above @import method.
Upload all your font files under “Assets” section and link them using @font-face CSS parameter in “main_style.css” or “main.less” file.
@font-face {
font-family: 'Custom_Font';
src: url('customfont.woff2') format('woff2'),
url('customfont.woff') format('woff'),
url('customfont.ttf') format('truetype');
}After this you can define the usage at element level by defining the CSS.
body { font-family: 'Custom_Font', Fallback, sans-serif; }4. Customizing All Similar Elements on a Page
All the above methods will change the style impacting throughout the site. There are situations you may want to change the all similar elements only on a page. In this case you need to find the corresponding CSS class for customizing the element. Assume you want to change the font family of all paragraph text on a page to monospace. Add the following code to the header of your page under “Pages > SEO Settings > Header Code” menu.
<style>
.paragraph {
font-family: monospace;
}
</style>Paragraph is the CSS class used for text elements. You can find the CSS class of an element by viewing the “Inspect Element” option in your browser.
Warning: Using external fonts, uploading fonts to your own site and adding custom styles in header section of the page will NOT have impact on the editor. You need to publish the site to see the changes made in font styles.
5. Customizing Individual Element’s Font Style
You may also need to change the font properties of an individual text or title element. In such cases, drag and drop “Embed Code” element and add custom HTML code with inline CSS styles. The inline styles will be effective on the editor; hence you can see the changes are effective instantly on the page. Below is an inline CSS code for adding custom H1 heading:
<h1 style="text-align:left;font-size:28px;color:red;font-family:arial;"> This is a first Heading for Your Page</h1>
Leave a Reply
Your email is safe with us.