I'm using Visual Studio and for some reason my rendered font is showing as Arial, even tho I set the font-family to font-family: 'PT Sans', sans-serif;
Why is this?
This is not because of the browser because I checked it with every browser and it's the same.
How can I change the rendered font to 'PT Sans'?
Add this line in the head element of your page:
<link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
Alternatively, you could add this inside a CSS file that's already loaded by the page:
#import url(https://fonts.googleapis.com/css?family=PT+Sans);
You can also customize the character sets and the styles being loaded in this page. Select your desired character set(s) and style(s) and use the resulting link.
Related
The <head> tag in my html file contains this link call:
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
Then I go on to say:
<style>
body {
font-family: 'Lato', sans-serif;
}
.textTime {
font-weight: 700;
}
</style>
Then my body goes on to say this:
<div class="textTime">
from 6am to 6am
</div>
It gets rendered like so:
However, if I change the font-weight property to font-weight: 400; instead of 700, it gets rendered like so:
So my problem is, the font is getting rendered as Lato, only if the weight is 400, not 700, then it gets rendered as something else.
The way it's doing this is because it's using CSS2, not CSS3, and I can't change this.
How can I solve this issue?
When using custom font's you need to add each font type for each weight you are going to use.
The reason you are seeing a broken version of Lato or another font is you either have another font defined for those font weights or you are seeing the browsers render version of Lato which will be based on the Lato 400 and up or down scaled depending and it will look nothing like how you intended.
I'm using Open Sans font for my website but it is not working across all computer and I can't figure it why.
I'm calling it in my <head> tag. I tried https or http or // and the result is the same.
<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700' rel='stylesheet' type='text/css'>
It is well loaded from the browser (status 200).
My CSS looks like this:
body{
font-family: OpenSans;
}
But my text are rendered with some sans-serif font besides the fact that it mention Open Sans in the CSS inspector. Even if I remove all font-family from the CSS inspector in my Chrome browser, the font doesn't change. Also, if I add !important, nothing change.
What can be the source of this issue?
I already tried this solution without success.
I don't think it's a conflict because it's working on some computer.
Ok, my main error was to use font-family: OpenSans; instead of font-family: 'Open Sans';
did you try to reference your CSS with https?
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700" rel="stylesheet" type="text/css">
I tried this with JSFiddle and it work in my Chrome. https://jsfiddle.net/doqvqfhe/1/
Could you give some more code?
I use font-family "Open Sans", It works instead of "OpenSans".
What font used when I don't have that font?
Example:
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow: 400' rel='stylesheet' type='text/css'>
<style>
body {
font: 400 30px/1.4 Arial;
}
p {
font: 700 30px/1.4 "Pt Sans Narrow", Arial;
}
</style>
</head>
<body>
<p>Example.</p>
</body>
</html>
In this example, I don't have "Pt Sans Narrow 700". What font used?
The regular typeface of the PT Sans Narrow family used, with algorithmic (synthetic, fake) bolding applied to its glyphs. In this case, the result is clearly bolder than plain PT Sans Narrow but less bold that PT Sans Narrow Bold.
CSS Fonts Module Level 3 says, in its description of font-weight: “Although the practice is not well-loved by typographers, bold faces are often synthesized by user agents for faces that lack actual bold faces. For the purposes of style matching, these faces must be treated as if they exist within the family. Authors can explicitly avoid this behavior by using the ‘font-synthesis’ property.” (The font-synthesis property is not supported yet.)
Unless there is some very special reason to ask for “fake bolding”, despite the existence of an actual bold typeface, you should specify bold (700) weight in the element where you refer to the the Google font, as instructed by the Google documentation:
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700'
rel='stylesheet' type='text/css'>
You are using google font that means it obviously take this font. But if you haven't used google font then if the client has no such font then it would take another font that is Arial.
Consider this example:
font-family: font1,font2,font3;
Here if the client browser has no such font font1 then it will try to use font2 and if font2 is still not available then it will use font3 but if font3 is not still there the client's default font would be used there.
Arial is used if Pt Sans Narrow is not present.
When you open a HTML-File and the browser can't find the font, the normally it will use the default font of the browser.
What will happen is it will look at the declared font stack you have made:
"Pt Sans Narrow", Arial;
and see the next font in the list after the one it cant find "Pt Sans Narrow".
In this case it will be Arial.
This is highly depending on the rendering engine you are using.
Most engines make the font that is available "Pt Sans Narrow" just bold, which in turn would not look like the correct "Pt Sans Narrow" 700, but might come close.
And then there are those engines that skip an not available font and would choose the next in line, that might be Arial if it is available or the devices default font if the device also doesn't have Arial.
I am trying to use font Orator Std but it does not appear corretly.
more,
when I tested the code on local server, font size was near to what I want in image here, when tested on jsfiddle, font size changes for element and position also change. any reason for this?
why hr does not appear in yellow
How to last to character in vuvua specific color?
JSFIDDLE : http://jsfiddle.net/ewGXv/
I want my page to look similar to :
The problem you have is that the font is not a standard font available on any system. To include a non-standard font you will to reference that font and force it be downloaded if not available.
For example, to use a font from Google's Font API you can:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'PT Sans Narrow', sans-serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Sample text</div>
</body>
</html>
If you specifically need Orator and it is not available for hosted loading at a service like Google's Font API, then you will need to download and host it yourself.
ADDED:
Although not perfect this is 90% of what you need. I'll leave you to tweak the layout and styling to your needs. A rough example of the layout
Andy
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!
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.
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?
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.