font-famil is same for all browser except safari
CSS for applying font-family throughout the application body
body {
height: 100%;
font-size: .80em;
font-family : "PT Sans","Century Gothic",Verdana, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
color: Black;
}
For windows google font PT Sans is not supported for safari browser.
See here in the git hub
Use google PT Sans font
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
OR you may download PT Sans webkit font from this website and include individually in you website
Related
I'm debugging this website. For some reason on IE9, the font sizes load normally and then shrink once everything has loaded.
What's causing this and how can it be fixed? I've double checked with the IE9 inspector and the px values seem to be missing from the body in the CSS.
Here's what I'm seeing via the IE9 inspector:
The CSS should read:
body {
color: #555;
font-family: "Avenir LT W01_55 Roman1475520", Helvetica, Arial, sans-serif;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.875;
font-weight: normal;
}
Apparently IE9 has built-in font-size: 100% for body aswell as html. Set font-sizes for p tag.
I'm currently working on a store on Tictail (it's not uploaded yet, so I don't have a link). I want to use the font PT Sans Narrow for the store, but there is a problem:
The font displays correctly in Safari and Firefox on my iMac, but when my friend tries it in Firefox and Internet Explorer on his PC, the font doesn't display correctly.
This is what I'm working with:
<link href="{{assets_url}}/shared/css/base.css" rel="stylesheet" type="text/css">
body {
background-color: #fff;
font-family: 'PT Sans Narrow', sans-serif;
letter-spacing: -0.02em;
font-size: 14px;
line-height: 1.5em;
color: #222;
-webkit-font-smoothing:antialiased;
height: 100%;
}
What is the problem and how can it be solved?
It's because Windows don't have 'PT Sans Narrow' as default font. You need to add this font like a web-font. For instance from Google Fonts.
Simplest way:
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
Put this at the top of your base.css. It will import PT Sans Narrow from Google Fonts.
#import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
A webpage will always check to see if the user has the font installed on their computer. If they don't it will import it from Google Fonts.
i guess that firefox is the only browser that doesn't support the font "Arial Narrow". And the other browsers don't support the "font-stretch" property. How can I target a specific browser with CSS? I have done this:
#-moz-document url-prefix() {
h2 {
font-family:"Arial";
font-stretch: condensed;
}
.header_p {
font-family: "Arial";
font-stretch: condensed;
}
}
h2{
font-family:"Arial Narrow";
font-size: 22px;
letter-spacing: 0px;
}
.header_p {
font-family: "Arial Narrow";
}
It isn't working and I don't know why..
If I swap the order so that the #-moz part is second, then chrome stops working. I guess it's trying to apply the #-moz rule
And IE doesn't read the CSS at all
From the much missed H Open Magazine:
CSS3 includes a font module which offers an #font-face declaration, allowing web developers to load fonts to ensure that their website displays with the right font. WOFF is the data format for these fonts.
A file format specifically designed for the web, it is a container which, as well as the (optionally compressed) font tables in sfnt format, can also contain metadata, such as licensing or other information.
Browser support is near universal.
Here's an example of how to use them.
Does that help?
I am not sure whether that font family is supported by firefox or not but you can
Target only firefox using
#-moz-document url-prefix() {
h1 {
color: red;
}
}
See complete documentation here
You can target IE as
<!--[if IE]>
// Your css for IE or
// Perhaps importing a specific style sheet as
<link rel="stylesheet" type="text/css" href="ie9_and_below.css" />
<![endif]-->
target chrome only
#media screen and (-webkit-min-device-pixel-ratio:0) {
div{
color: red;
}
}
You can try the below snippet.
h2 {
font-family: "Arial Narrow";
font-size: 22px;
letter-spacing: 0px;
}
.header_p {
font-family: "Arial Narrow";
}
h2, x:-moz-any-link {
font-family: "Arial";
font-stretch: condensed;
}
.header_p, x:-moz-any-link {
font-family: "Arial";
font-stretch: condensed;
}
I downloaded this font
And this is how I include it into my stylesheet:
#font-face {
font-family: "surface";
src: url(fonts/Surface-Medium.otf);
}
And this is how I use it:
#site-header .site-logo a {
color: #00B1ED;
font-family: "surface";
font-size: 40px;
font-weight: bold;
letter-spacing: -1.5px;
text-shadow: 0 1px 5px #000000;
text-transform: capitalize;
}
#site-header .site-logo a span {
color: white;
}
#site-header .site-logo a span:last-child {
font-size: 22px;
}
the problem is that in google chrome it renders really bad:
but in firefox it works well:
Am I Doing anything wrong?
convert the font to embedded Open Type(.eot) and also add .woff for other browser support.
It renders properly in browsers.
Or try this for chrome -webkit-font-smoothing: antialiased;
Most Windows browsers will only render TrueType fonts with any degree of smoothness. OpenType (CFF) generally will not render well with the Windows rendering engine. Not only that but these TrueType fonts must contain hinting data that tells Windows how to place pixels at small sizes. Consider running your OTF through the Font Squirrel Generator to give you all the font formats needed along with the correct CSS code.
The problem here is that I was including the normal style font and then implementing the bold,
For some reason it was working in firefox so it make sense it failed on others, but this:
#font-face {
font-family: "surface";
src: url(fonts/Surface-Medium.otf);
font-style: normal;
}
#font-face {
font-family: "surface";
src: url(fonts/Surface_Bold.otf);
font-style: bold;
}
Made it work in other browsers too
Of corse, the bold.otf file must be included in the used path
I need a solution.. I am using google fonts on my website, but it is not working in safari, how can I tell the browser to use a different style when the font is not working? Here is my css code:
#import url(http://fonts.googleapis.com/css?family=Pontano+Sans);
h2{
font-family: 'Pontano Sans', sans-serif;
font-size: 15px;
text-transform: uppercase;
}
I just want to have another css rule like this, but without it overriding the above rule:
h2{
font-family: Arial, Helvetica, sans-serif;
color: #666;
font-size: 12px;
}
you should use the web-fonts loader capabilities to handle scenarios where fonts are not loaded.
that way, you can specify different styles based on the load state (active / inactive / loading).
see the web-fonts loader reference on loading states (and on github).