Website Font Different when seen on Computer prior upload on web host. How to rectify?

Question

I am making a website in which I am using a font "PT Sans Narrow"

It seems Chrome and many browser do not have this font.

Is there some way by which this font could be included with the website while uploading so that viewers get to see PT Sans Narrow?

The website could be seen here

As one may see, the " Hi! I am ... " and so on is not in PT Sans Narrow.

How does one make that font and all other PT Sans Narrow?

Help is deeply appreciated!

stevenspiel · Answer 1 · 2013-12-19T14:27:55.910

2

You're going to want to put a link in your header to the font.

<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>

then, your html will need something like this:

<span class="pt-sans-narrow">Hi! I am ...</span>

and your css will look like this:

#pt-sans-narrow {
    font-family: 'PT Sans Narrow', sans-serif;
}

Edit

After looking at your website, you are already calling the font from the style.css file in the body, so it should all work fine if you just add the link to the header.

edited Dec 19 '13 at 14:27

answered Dec 19 '13 at 14:22

stevenspiel

5,775
13
60
89

I just added the link to the header, there was no change though. Should I go make changes to the HTML and the CSS too then? – Shubham Dec 19 '13 at 14:41
give me a sec. Let me take a look at it – stevenspiel Dec 19 '13 at 14:44
it actually is working. The font is loading just fine and is applied to the website. Just a guess, but perhaps you were looking for a different font-weight? Is your expected outcome skinnier, bigger, does it have serifs? What do you expect it to look like? – stevenspiel Dec 19 '13 at 14:47

score 0 · Answer 2 · edited May 23 '17 at 12:03

0

You can download the font file and load it in your CSS.

load and use it as

@font-face {
    font-family: "Custom font";
    src: url("../fonts/customFont-Regular.ttf");
}

in your stylesheet.

also see: Using custom fonts using CSS?

edited May 23 '17 at 12:03

Community

1
1

answered Dec 19 '13 at 14:24

gaurav5430

12,934
6
54
111

I did your suggestion, Did not work. I'll read the article and try again. Thanks! – Shubham Dec 19 '13 at 15:22
also check this out http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/ – gaurav5430 Dec 19 '13 at 17:33

score 0 · Answer 3 · answered Dec 22 '13 at 02:58

After reading your comments, and looking at your screenshots, I don't think PT Sans Narrow is what you're after. Because the question is about PT Sans Narrow, my other answer still stands, but here are some suggestions:

Try adding this to the header, in place of the two instances of PT Sans Narrow:

<link href='http://fonts.googleapis.com/css?family=Lato:400,300|Source+Sans+Pro:400,300' rel='stylesheet' type='text/css'>

Then, you can play around with the font of the body. These fonts are similar to what you are after and you could do something like:

body {
   font-family: 'Lato', sans-serif;
   font-weight: 300;
}

I think that's more what you're after. Try customizing, as well by changing

font-weight:400;

or

font-family: 'Source Sans Pro', sans-serif;

Play around with it and let me know what you come up with.

Website Font Different when seen on Computer prior upload on web host. How to rectify?

3 Answers3