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".
Related
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.
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 created a fiddle trying to use Open Sans font with font-weight 300:
HTML
<span class="demo">example</span>
CSS
.demo {
font-weight: 400 !important;
font-family: 'Open Sans' !important;
font-style: normal;
font-variant: normal;
}
I use Google fonts to define the CSS
I can see a difference in Firefox (Ubuntu 13.10) when rendering at font-weight: 300 (light) and at font-weight: 400 (normal) but none in Chrome (Version 33.0.1750.117
), where everything looks like it's rendered at font-weight:400. Am I doing something wrong or is there a bug in Chrome? Is there any known workaround?
Update:
There is definitely something wrong with chrome I have two instances of the same page open in 2 different windows in Chrome. One is rendering the font ok (300 weight corresponds to the light variant) and one is not (300 weight is the same as the Normal variant). Any clues? I've made sure to refresh the page in each tab so they are actually the same page.
Update 2:
Attached screenshot: of the bug:
Update 3
This is not a duplicate of this. In that question the problem is that "Arial Black" and "Arial" are different fonts actually. In my case Open Sans is the only font and the problem is Chrome picking up the incorrect weight some times. As you can see from the screenshots, Chrome is not consistent with the font rendered even between two instances.
Add this to your CSS:
* {-webkit-font-smoothing: antialiased;}
This seems to be a Chrome/Chromium bug, caused by having the font installed locally on your system. Other browsers don't seem to suffer from this issue.
So far, it seems to occur on Linux and Windows (confirmed).
For some reason, it will just load your local font and ignore any of your font-weight rules, even if they're !important. It won't even be consistent with itself: the font weight can change randomly between tabs and page reloads.
The simplest workaround is to remove the font, but that could be an issue if you need it for something else.
You might also try renaming the font to something else in order to force Chrome to use your web font and honour your CSS font rules.
I was having this issue with a variable font. It was solved by defining a font-weight range in the font-face definition.
#font-face {
font-family: …;
font-weight: 1 999;
src: …;
}
Try changing the font family to 'Open Sans Light', sans-serif;. I had the same problem and this worked for me.
i overlaid them on top of each other and they look good on osx chrome.
font-weight: 400 !important;
beneath
font-weight: 300 !important;
http://jsfiddle.net/gpmXe/22/
My solution is download and install all the weight types of the font on your machine, or don't install it at all. That's odd solution, but works for me.
For me the solution was to include the CSS in the head-section instead of using #import inside the stylesheet.
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,700;1,400&display=swap" rel="stylesheet">
In HTML use this instead of using it in CSS. Best Solution 👍
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,700;1,400&display=swap" rel="stylesheet">
Doc for ital & wght
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.
I've noticed a significant difference in rending of Open Sans (Google Web Font) from Chrome, to Safari/Firefox. I attach two photos, the first being chrome and the second safari.
All I have in the stylesheet is:
font-family: 'Open Sans', sans-serif;
font-size:14px;
Hope you can help, as I really like the chrome (first image) rendering but HATE the other one!!
Add to head
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
CSS rule
.btn{
font-family: 'Open Sans', sans-serif;
font-weight:300;
text-rendering: optimizeLegibility;
font-size: .9em;
}
I've had luck in the past using font-weight: lighter!important; on fonts that appear bolder and completely different than what they are intended to look like. Each browser interprets fonts differently. Google Web Fonts tries its best to serve the correct versions, but sometimes there are drastic changes between browsers and operating systems.
Hope this information helps! Let me know if this solution works, otherwise I can look into it further. Open Sans is a nice font for web, nice choice :)
I added directly this line im my header and it's working!
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
.nav > li > a {
color: #000; font-size: 13px; font-weight: 600;
}
Instead of just calling the font without sizes in the Header and defining it afterward as bold, a method who doesn't work.
There is an issue where Safari renders fonts at fixed sizes and other browsers render them more exactly:
example at tech.Ozake.com
So if you request your text to be a size that falls between two of Safari's steps, you will get a different result in Safari than in other browsers.
So depending on how you declare the font sizes and how the window is sized, you will get differently-sized results.
This workaround helped me to make Open Sans to look very close in different browsers.
<script>
function loadCss(path){
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", path);
document.getElementsByTagName("head")[0].appendChild(fileref);
}
if (ViewUtil.isChromeBrowser()) {
loadCss('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
} else {
loadCss('https://fonts.googleapis.com/css?family=Open+Sans:300,600');
}
we are forcing a bit 'bolder' version of font for chrome
You apparently didn't reset the default browser CSS, try setting font-weight explicitly.