How to Use Nonstandard Fonts in a Website
- 1). Launch your FTP program and type your user name, password and server information into the appropriate fields.
- 2). Pres "Enter" or click the "Connect" button.
- 3). Navigate to the folder, such as the base folder of your website, in the "Remote Server" pane of your FTP program. You may also choose to create a new folder for fonts such as "http://yourwebsite.com/fonts."
- 4). Navigate to the folder that contains the font file on your computer in the "Local" pane of your FTP program.
- 5). Double-click on the font file or right-click and choose "Upload" to upload the file. Note the URL, which may be similar to "http://yourwebsite.com/fonts/fontname.ttf" if you are using a "Fonts" folder and it is a TTF font.
- 1). Right-click on your HTML Web page or external CSS file in your FTP client and select "Download." Open the file in your text editor.
- 2). Add the following CSS block before the </style> tag in the head of your HTML document:
@font-face {
font-family: 'name of your font goes here';
src: url('http://yourwebsite.com/fonts/fontname.ttf')
}
Change "http://yourwebsite.com/fonts/fontname.ttf" to the actual URL of your font file.
If using an external stylesheet (such as "style.css"), simply paste the block of CSS at the end of your document. - 3). Add the following to the CSS in your head or external stylesheet:
.specialtext {
font-family: 'Font Name'
}
Change "Font Name" to the actual name of your font. You may also change "specialtext" to any descriptive word. For example, you may name it "signaturetext" if you're using a cursive font to emulate a signature. - 4). Save the Web page or CSS file by opening the File menu and selecting "Save."
- 5). Upload the file to your Web host server by double-clicking on it in the Local pane of your FTP client or dragging and dropping it from its location on your computer to the Remote pane of the FTP program.
- 1). Download and open the HTML file you wish to edit, if it is different from the file that contained your CSS.
- 2). Open the HTML file in a text editor such as Notepad.
- 3). Place any text you wish to use the nonstandard font with between the <p> and </p> tags so it looks like this:
<p>This text will use a nonstandard font.<p> - 4). Change "specialtext" if you have changed the CSS selector in the stylesheet/head.
- 5). Save and upload your HTML file.
Upload Font
Edit CSS
Edit HTML
Source...