Step: Download the font
Find the custom font you want to use on your
website, and then download the TrueType Font file
format (.ttf). You can also download the OpenType
Font format (.otf)
Upload the font files to
your website
Using your FTP or file manager, upload all the font
files found within your Web Font Kit to your website.*
Typically this kit will include multiple file extensions
such as (.eot), (.woff), (.woff2), (.ttf) and (.svg).
Your kit will also include a Cascading Style Sheet
(.css) that you will need to update and upload in
Update and upload your
CSS file
Open the CSS file in a text editor such as Textedit,
NotePad or Sublime.
Replace the existing source URL with the new URL
you created by uploading each file.
By default, the source URL location is set within the
downloaded Web Font Kit. It needs to be replaced by
the location on your server.
@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");
}
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;
}
(0) Comments here
Sir No Comment on this post Please Make a New