Search code examples
fontsserverfont-face

@font-face and root directory upload


I have a font which I purchased, the instructions say "Upload the contents of the Kit to your server/root directory", but I do not quite understand what this is or how to do it. Has it got anything to do with phpMyAdmin.

The only thing I understand is the fonts may appear different in IE.


Solution

  • This is for Windows, the process should be similar but will not be exactly the same on other operating systems. ##

    (unless you are doing this on a website you have bought (ie: www.example.ca) However if you are doing it locally (just on your computer as a file) than it will be different on other operating systems.

    Before you read all of this post...the font that you purchased, the file should end in a ttf or woff file format if not, I'm sorry but the font you purchased most likely isn't a web font, and this answer won't help you (feel free to post what the name of it is if it isn't ttf or woff. And either way PLEASE dont buy fonts for websites (or anything for that matter) you can always get them for free: read my last blurb where it says "BTW:" to see where to get web fonts for free!

    Okay. Lets go on a brief rundown on how fonts work.

    Safe Fonts

    Safe fonts are fonts that work on most browsers. This is what Wikipedia says they are:

    Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by Web content authors to increase the likelihood that content displays in their chosen font. If a visitor to a Web site does not have the specified font, their browser tries to select a similar alternative, based on the author-specified fallback fonts and generic families or it uses font substitution defined in the visitor's operating system.

    you can think of them as fonts that work with most internet browsers.

    Why did I bring up safe fonts? Becuase they are the easiest to use and require 0 setup. However DONT WORRY! All will work.

    Other Fonts

    While I am sure this is the technical name, it will have to do. These are fonts that browsers do not know how to display if you do not point them to the font's files (this is what you have).

    Ok lets get started:

    I have no idea how much you know about websites so I am going to make this as simple as possible.

    On A Website:

    If you have a website (you bought it with some company and have a domain) than you will want to go to your cPanel. The login information for this you should have received from the company. Once you are logged in click on File Manager if there is a popup just hit go . Now what you want to do is find the upload button in the toolbar. Click this and upload your font.

    Continue to Make Your File below

    On your Computer:

    Put your font into a folder somewhere like on your desktop. Then put your font into that folder. Continue to Make Your File below

    Make a file

    The next task is to make an html file.

    If you are doing it on a website / domain, in cPanel hit "new file" near the upload button you used earlier. Type index.html (remove the .txt, and if you font see any file extension then search google how to display file extensions) and then press Create New File.

    Proceed to Edit File below

    If you are doing it on your computer, inside your folder with the font, right click on an empty spot in the folder, press new, and select text document. Now rename it to index.html

    Proceed to Edit File below

    Edit File Now right click the file you just created, select edit.

    Paste in the following code (which I found here):

    <style type="text/css">
    @font-face {
        font-family: "My Custom Font";
        src: url(mycustomfont.ttf) format("truetype");
    }
    * { 
        font-family: "My Custom Font", Verdana, Tahoma;
    }
    </style>
    <p class="customfont">Hello world!</p>
    

    In the code above, you need to replace mycustomfont.ttf with the name of font file that you purchased... It should end in ttf or woff if not I'm sorry your font wont work!

    Also replace the two places where it says My Custom Font and name it whatever you want.

    Also if you would like, you can change the text where it says Hello world! to whatever you want.

    Now you need to save the file.

    If you did this on your domain / server / cpanel.. the next step is to go to your website in a web browser (ie: Chrome, Safari, Firefox, Opera, Internet Explorer, Edge, etc). and navigate to your domain (ie: www.example.ca) and you should see the text you wrote in your font.

    If you did this on your computer... Right click index.html > select open with > select your web browser (ie: Chrome, Safari, Firefox, Opera, Internet Explorer, Edge, etc).

    I am not going to explain how to do other things.. It sounds like you need an introduction to HTML and probably CSS so I suggest that you go and try out at least one of these introductions:

    HTML & CSS - Codecademy

    HTML - W3 Schools CSS - W3 Schools

    Anyway I hope you get it working!

    BTW: I would suggest never buying fonts again... google.com/fonts has an endless supply of free fonts and you can read my answer to another question here where I explain how to use google fonts.

    Good luck!