PDA

View Full Version : Set correct font


ejenner
10-18-2014, 07:53 PM
My website clearly has the wrong font. http://www.miniandbmw.co.uk

I was following a guide to use Dreamweaver to build this site but I've obviously got the bit for setting the font wrong.

I've got a custom font for the site that I want to use.

On the PC where I built the site the correct font is displayed but looking at the site from any other computer and the site appears to use 'times new roman' or whatever the default font is.

So how do I upload a font to my hosting space and instruct browsers to use it?


Thanks! :D

Ricky55
10-19-2014, 08:30 PM
You need to specify the correct font in your CSS. The reason why you're seeing the correct font is because you'll have the font installed and the other computers won't.

For example



body {
font-family: Arial, sans-serif;
color: red;
}

p {
font-family: Georgia, serif;
color: blue;
}



Only a small set of fonts are known as web safe fonts. These are fonts that every computer has installed by default. A typical example would be Georgia.

If you want to use a custom font then you can either use a font serving service such as TypeKit or you can use the CSS3 @font face property, example below.



@font-face {
font-family: 'quicksandregular';
src: url('quicksand-regular-webfont.eot');
src: url('quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('quicksand-regular-webfont.woff2') format('woff2'),
url('quicksand-regular-webfont.woff') format('woff'),
url('quicksand-regular-webfont.ttf') format('truetype'),
url('quicksand-regular-webfont.svg#quicksandregular') format('svg');
font-weight: normal;
font-style: normal;

}



If your font is custom then you'll need to provide your font in a few different file formats for it work work across different browsers.

The easiest way to get the correct CSS code and the correct file formats is to use the free service font squirrel. This lets you upload your font and provides you with the correct file formats and the correct css.

http://www.fontsquirrel.com/tools/webfont-generator

Good luck!

ejenner
10-20-2014, 10:46 AM
Ok, so I used font squirrel but I'm doing something wrong as I'm not getting the expected results.

The instructions from font squirrel are as follows:

"1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.
2. Include the webfont stylesheet

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post (http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax) about it. The code for it is as follows:
@font-face{ font-family: 'MyWebFont'; src: url('WebFont.eot'); src: url('WebFont.eot?#iefix') format('embedded-opentype'), url('WebFont.woff') format('woff'), url('WebFont.ttf') format('truetype'), url('WebFont.svg#webfont') format('svg'); }
We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
3. Modify your own stylesheet

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:
p { font-family: 'WebFont', Arial, sans-serif; }
4. Test"

ejenner
10-20-2014, 10:52 AM
I think the problem is that these instructions aren't idiot proof.

So where it gives the details for what to add to your .css file and your .html files they aren't really necessarily the correct lines. For example, where it says url('WebFont.eot') are you meant to change that so it has the name of your font and do you change url to the folder where your fonts are?

All this kind of stuff I can't really work out on my own as I used the font generator website to bypass having to know the code. Now it is expecting me to know the code in order to implement the output it generated.

Ricky55
10-20-2014, 05:45 PM
Font Squirrel is just a free service aimed at web designers, you can't really expect them to do anymore than provide you with the necessary code.

If you don't really want to learn web design and some code then I wouldn't recommend that you use Dreamweaver.

I've recorded a short video for you to explain how to use it.

https://db.tt/4a0ex6ix

The files I used in the video are here:

https://db.tt/Y85su6so

Following this you should be fine.

Let me know how you get on.

Thanks

Richard