Weebly comes with an eclectic selection of fonts to use, but maybe not the one you want. So what do you do? You add your font to your Weebly site! That's what you do.
We'll show you how to add any custom font to your Weebly site. From there, we'll show you then how to apply it to specific texts.
For this tutorial, we're going to install the font "BRIZEL" from fontsquirrel.com and apply it to Weebly's "Title" element.
Step 1. Get your font
If you have your custom font file, proceed to step 2.
If you don't have your custom font file, check out these great websites that offer free fonts:
Step 2. Convert your font
In order to make sure your font appears correctly on all the many different browsers and devices available, we need to convert it to 5 different file formats. To do this, head over to fontsquirrel.com/tools/webfont-generator.
Now, upload your font (.TTF or .OTF) to the Webfont Generator and select "EXPERT...".
Under "Font Formats:", select "TrueType", "WOFF", "WOFF2", "EOT Lite", and "SVG".
Click the "Agreement" box and then click on the "DOWNLOAD YOUR KIT" button.
Step 3. Reset Weebly Element
We want to apply our custom font "BRIZEL" to Weebly's "Title" element, so we need to set the "Title" element to its default font. This allows the "Title" element to use our custom font "BRIZEL".
To do this, in the Weebly Editor, go to "Theme>Change Fonts>Paragraph Titles", and from the font selection drop down, scroll all the way up and choose the font under "Default".
Step 3. Add CSS Codes
Extract the folder you downloaded from Font Squirrel. Within it, locate the "stylesheet" file, open it, and copy all of the CSS codes within it.
Now, within the Weebly Editor, at the top, click on "Theme", and on the bottom-left, click on "Edit HTML/CSS".
On the left, under "STYLES", click on "main.less". On the right, add the CSS code you copied from the "stylesheet" file, preferably near the top.
Step 4. Upload font files
On the left, under "ASSETS", click the "+" icon to the right and select "Upload File(s)...".
Select all 5 file formats of your custom font from the folder you downloaded from Font Squirrel and upload them to your Weebly site.
Step 5. Apply custom font
To apply your custom font, click on "main.less" under "ASSETS". On the right, copy the name of your custom font from the CSS codes you added in step 3.
Since we're applying our custom "BRIZEL" font to Weebly's "Title" element, we need to locate the h2 tag's code within this CSS file. Then we're going to add the name of our custom font (i.e., brizelregular) to the "font-family" code of the h2 tag as shown below in orange:
margin:0 auto 10px;
You Might Also Like