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;
}
Related
I am using various versions of Halvetic on this website. For some reason they all display fine, except for one which is fuzzy. I have noticed that one some browsers it is better or worse - however, on my iPhone it is really crisp and perfect?
Are there any suggestions on how I can get this font to display correctly in modern browsers on a desktop (chrome/firefox etc)?
This is what I see:
URL: http://52.64.135.79/wordpress/company-overview/
Relevant CSS rules I can see are as follows. Is there something I can do to fix this?
h4, .h4 {
line-height: 21px;
}
h4, .h4 {
font-size: 16px;
}
h4, .h4 {
font-weight: 700;
}
h4, .h4 {
font-family: "Helvetica Neue LT W01_55 Roman", sans-serif !important;
margin-bottom: 5px;
padding: 5px 0 0;
letter-spacing: 0.00em;
}
body {
-webkit-font-smoothing: antialiased;
}
Ultimately the issue here was because the font itself has a separate character set for each different font weight.
The CSS was applying a font-weight of 700 to a font which was meant to be rendered at 400. The fix was to download the heavier weight version of the font, rather than allow the browser to create an artificial "bold" version.
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
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 am using this css script :
#top_menu li a {
display:block;
margin-top:2px;
font-family: 'Federant', cursive;
font-size:16px;
color:#8f7a60;
padding:21px 30px;
border-right:1px solid #1e1a18;
border-left:1px solid #302a26;
}
for a text on my website but it doesn't not make it federant family. How to include it ?
Without any details on the context of the provided CSS, we can only guess the possible issues.
The most likely is that the Federant font is not a standard web font. If it is not installed on the visitor's system, the page cannot use it.
You can provide fallback standard fonts (you should in fact).
You can also, if the licence of the font allows it, embed it in your stylesheet. So the browser will load the font and apply it to the links.
Here's an example of code to embed a font :
#font-face {
font-family: 'Federant';
src: url('fonts/Federant.eot'),
url('fonts/Federant.ttf') format('truetype'),
url('fonts/Federant.svg') format('svg');
font-weight: normal;
font-style: normal;
}
It sounds like the CSS does not know what that font is, so it must be included.
See, there are webfonts which are built-in fonts in the browser, such has sans-serif, arial, serif, etc. If it is not a 'webfont' then it must be manually included.
To do so, you will need the font files, and then you can include them in your CSS like this:
#font-face Federant {
font-family: 'Federant';
src: url(../fonts/Federant.woff);
}
#top_menu li a {
font-family: Federant;
}
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