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
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 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 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;
}
From the start I need to say that I know what I'm trying to do is not "the right way to do it", but the client I'm working for desperately wants THIS specific font.
So, I need to use on a client's website the exact font as VOGUE uses. So I took the .eot & .ttf and uploaded them on my server. Then I added the CSS definitions:
/*fonts fonts for IE*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
/*fonts for other browsers*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
And the CSS for my element is:
.post h1 {
display: block;
height: 100%;
font-family: VogueDidot;
font-size: 55px;
text-transform: uppercase;
overflow: hidden;
line-height: 58px;
}
And, normally, I expected to see everything working like a charm.
But it's not...
Here's how it should look like:
https://lh.rs/8M9Q7EvRBapv
And here's my version :
https://lh.rs/Lbini5YbQZlX
Any ideas?
It's important to note that using custom fonts are not pixel perfect on all browsers since all browsers tend to render the fonts differently. Another issue can be people not enabling ClearType within windows which I'm sure in this case its not but for other readers I decided to include this information.
It would seem that your font support is pretty limited since you are only using .ttf and .eot - for maximum compatibly and limiting render issues it's best to use 'ALL' 5 font types which are:
ttf (TrueType Font)
oft (Adobe/Microsoft Open Font Type, AKA OpenType)
eot (Embedded OpenType)
woff (Web Open Font Format)
svg (Scalable Vector Graphics)
Ideally you want to use SVG as much as you can since this provides the best quality, SVG is supported in modern versions of Andriod Browser, Firefix, Safari, Opera, Chrome but not in IE.
Personally I'd convert the fonts to all these file types and see if the outcome improves, browsers will automatically use their preferred font type. You can use Font 2 Web to convert to the other formats, its important to note that fonts are copyrighted and your client will require licensing, some fonts don't even allow web use.
I know there are browser rendering inconsistencies between Chrome and Firefox (Windows, both). But I am seeing a weird bug involving #font-face & gooogle-fonts shifting the font down about 10px in Chrome.
Here is an image to illustrate the problem. I have highlighted the text so that you can see the shift:
Here is the CSS for clarity:
.primary-menu li a,
.primary-menu li a:visited {
display: block;
text-decoration: none;
text-transform: uppercase;
color: white;
font-family: 'Oswald', sans-serif;
font-weight: 700;
padding-right: 0;
transition: padding-right .5s;
}
I am using Google Fonts for the Oswald type face:
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,700|Oswald:400,700' type='text/css'>
I am using a CSS reset, so most properties are set to a default value. I have tried fiddling with the CSS to see if I can analyse why it is shifting, but I can not see an effect other than turning off the font-face.
Here is the source site for reference. Concept Design Ltd
Any knowledge on why this is happening would be fantastic.
Many thanks,
Neil
I recently had the same problem, but my font was NOT locally installed. (By the way, that would be a problem in web design, as you cant control the installed fonts on pageviewer´s computer).
The problem only occurred in Chrome 26 on Windows, and later in Firefox 19 for Windows but not on any other browser (neither Windows nor Mac OS x).
I finally found out that Chrome/Win would only render SVG Font correctly and Firefox took WOFF unhinted.
So I dirty-fixed the uncorrectly-rendered down-shifting with this-like CSS-code
/* for all browsers */
#font-face {
font-family: 'myfont';
src: url('myfont.eot');
src: url('myfont?#iefix') format('embedded-opentype'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype'),
url('myfont.svg#wf') format('svg');
}
/* for all webkit-browsers (Chrome, Safari and newly Opera */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'myfont';
src: url('myfont.svg#wf') format('svg');
}
}
/* for all mozilla-browsers (Firefox) */
#-moz-document url-prefix() {
#font-face {
font-family: 'myfont';
src: url('myfont_unhinted.woff') format('woff');
}
}
Hope this helps anyone.
I was having the same issue, but in FireFox - I removed the Oswald fonts I had in my font directory on my computer and it fixed the issue. Maybe give that a go?