0

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.

Francisco
  • 10,918
  • 6
  • 34
  • 45
jerneva
  • 473
  • 1
  • 8
  • 25
  • you're going to want to convert the file into multiple formats to make it work cross-browser/platform. use font squirrel, go to their generator. the @fontfacewebkit they create for you will automagically download. unzip it, and upload the folder to your server. you don't have to keep it there forever, but look at it live and understand where its assets are, and how they are tied to html document. – albert Mar 27 '16 at 00:09

1 Answers1

1

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!

Community
  • 1
  • 1
Trevor Clarke
  • 1,482
  • 1
  • 11
  • 20
  • w3schools is horrible. there's a reason why w3fools exists – albert Mar 27 '16 at 00:07
  • no, its horrible for beginners more than pros. beginners need to be guided, not given bad, misinformed, and sometimes incorrect information. this is entirely relative to the user, but saying its good for beginners sets them up for harder learning and hard realities. again, w3fools wasn't made because people were bored. it was made because w3schools is not a good resource. – albert Mar 27 '16 at 00:12
  • Hi. Thank you, so much makes so much sense i bought amsi and there is .eot .ttf .woff in the folder they have provided, they also provided the script. I know about css and html just didn't know about the directories, as i have done exactly what you noted and it didn't work, so was wondering if i jumped the run and done it incorrectly – jerneva Mar 27 '16 at 01:18
  • click on this link so we can jump into a stack overflow chat room [http://chat.stackoverflow.com/rooms/107443/yea-here](http://chat.stackoverflow.com/rooms/107443/yea-here) – Trevor Clarke Mar 27 '16 at 01:30