0% found this document useful (0 votes)
9 views

How To Upload Site-2

Uploaded by

philemonelzar
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
9 views

How To Upload Site-2

Uploaded by

philemonelzar
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

@font-face {

font-family: "CustomFont";
src: url("CustomFont.eot");
src: url("CustomFont.woff") format("woff"),
url("CustomFont.otf") format("opentype"),
url("CustomFont.svg#filename") format("svg");
}

After update:

@font-face {
font-family: "CustomFont";
src: url("https://yoursite.com/css/fonts/CustomFont.eot");
src: url("https://yoursite.com/css/fonts/CustomFont.woff") format("woff"),
url("https://yoursite.com/css/fonts/CustomFont.otf") format("opentype"),
url("https://yoursite.com/css/fonts/CustomFont.svg#filename") format("svg");
}

Once you’ve updated the CSS file, you need to upload it to your website (server).

Step 5: Use the custom font in your CSS declarations


Now that your Cascading Style Sheet and font files are uploaded to your server, you
can start using your custom font in your CSS declarations to help improve the look
of the HTML.

This can be done in multiple ways, including adding site-wide declarations to your
main CSS file.

Here is a quick example:

h1 {
font-family: 'CustomFont', Arial, sans-serif;
font-weight:normal;
font-style:normal;
}

How to add fonts in popular website building tools


Content Management Systems (WordPress, Drupal, Joomla, etc.)
There are a few different ways you can add custom fonts to a Content Management
System (CMS) like WordPress (WP):

Adding custom fonts using @font-face CSSAdd fonts using a WordPress plugin Manually
adding fonts from Google Fonts

Generally speaking, the 5 step process shown above will be the default approach
when adding a custom font to a CMS. Although the process might seem pretty
straightforward for people experienced with manipulating code, novice users will
often look for an alternative.

If you are using WP and don’t have any experience editing the source code (theme
files), you will most likely want to rely on a typography plugin. Plugins make it
easier to add custom fonts without having to write any code yourself.

The only thing I caution about when using WP plugins is that they can cause a
variety of issues on your website. It’s important to always research plugins before
using them on your site.
Finally, because Google Fonts offers a developer API, you can also choose to
“manually add” those fonts to your theme using the functions.php file.

Website Builders (Pagecloud, Squarespace, Wix, Weebly)


There are a ton of website builder options online that manage custom fonts in
different ways.

Google Fonts
For the most part, the top website builders make it pretty easy to add fonts from
popular sites like Google Fonts.

For example, with Pagecloud, adding a font from Google couldn’t be easier. All you
need to do is copy and paste the font, and voila, your font is added to your page
and ready to be styled in any

You might also like