How to Use Nonstandard Fonts in a Website

104 4

    Upload Font

    • 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.

    Edit CSS

    • 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.

    Edit HTML

    • 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.

Source...
Subscribe to our newsletter
Sign up here to get the latest news, updates and special offers delivered directly to your inbox.
You can unsubscribe at any time

Leave A Reply

Your email address will not be published.