logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 10-18-2014, 06:53 PM   #1
ejenner
 
Join Date: Oct 2014
Posts: 3
Default Set correct font

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!
ejenner is offline   Reply With Quote
Old 10-19-2014, 07:30 PM   #2
Ricky55
Ricky55's Avatar
 
Join Date: Oct 2005
Location: West Yorkshire, UK
Posts: 1,855
Default

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

Code:
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.

Code:
@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!
__________________
Qwerty Design

Check out my blog for web design insights.
http://www.qwerty-design.co.uk/
Follow me on Twitter: @QwertyDesignUK
Ricky55 is offline   Reply With Quote
Old 10-20-2014, 09:46 AM   #3
ejenner
 
Join Date: Oct 2014
Posts: 3
Default

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 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 is offline   Reply With Quote
Old 10-20-2014, 09:52 AM   #4
ejenner
 
Join Date: Oct 2014
Posts: 3
Default

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.
ejenner is offline   Reply With Quote
Old 10-20-2014, 04:45 PM   #5
Ricky55
Ricky55's Avatar
 
Join Date: Oct 2005
Location: West Yorkshire, UK
Posts: 1,855
Default

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
__________________
Qwerty Design

Check out my blog for web design insights.
http://www.qwerty-design.co.uk/
Follow me on Twitter: @QwertyDesignUK
Ricky55 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:27 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com