On my site i need to use font Interstate Hairline. So I put it on my Fonts folder and put then in my code, css:
#font-face {
font-family: 'interstateHairline';
url('../fonts/interstate-hairline.ttf') format('truetype'), font-weight: normal;
font-style: normal;
}
.documents_box ul h4 {
font-family: "interstateHairline" !important;
font-size: 12px;
font-weight: normal;
text-transform: lowercase
}
It's display correct on Windows 7, 8 all browsers. Ubuntu Chrome - correct, Firefox - it's bigger then must be. But main problem it's display not correctly on Windows XP in Firefox/Chrome. All browsers are latest version. Maybe someone have the same situation?
Sorry for grammar mistake.
Related
I am trying to use Google Material Icons in an electron app and ran across an issue in rendering the icons. The icons render perfectly on Windows but not on OSX. Using devtools I have seen that both request the font as 'woff2' format successfully but only Windows appears to render the icon...OSX simply list the ligature text.
Windows (left), OSX (right)
These works in Windows build but not OSX...it simply lists home or
<i class="material-icons">home</i>
<i class="material-icons"></i>
I have also tried
<i class="material-icons" id="test"></i>
#test:after{ content: 'home' }
Not sure if this an issue with chromium build for OSX, a OS font issue, or what? If anyone could provide any guidance on some things to try I would really appreciate the help.
Here is the CSS being used
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(./fonts/Material-Design-Iconic-Font.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(./fonts/Material-Design-Iconic-Font.woff2) format('woff2'),
url(./fonts/Material-Design-Iconic-Font.woff) format('woff'),
url(./fonts/Material-Design-Iconic-Font.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
So, I am not 100% sure on what the issue is but wanted to post an update if it could help anyone else.
On my Windows build I had a font installed MaterialIcons-Regular.ttf...once I copied it and then uninstalled it, the Windows app stopped rendering correctly.
I then copied the MaterialIcons-Regular.ttf to the fonts folder in my electron project and then updated my css to look like
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(fonts/MaterialIcons-Regular.ttf) format('truetype');
}
Now it seems to be working...Not sure if there was something wrong with the other font sets or if I have some css setup incorrectly.
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
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 am using two commercial fonts FrenchScriptStd and FuturaStd-Light (I have bought them separately and then using them to create a webpage)
This is my first page using this kind of fonts which are commercial (I have tried googlefonts but they do not have these fonts)...
#font-face {
font-family: 'FrenchScriptStd';
font-style: normal;
font-weight: 400;
src: local('FrenchScriptStd'), url('css/FrenchScriptStd.ttf') format('ttf');
}
#font-face {
font-family: 'FuturaStd-Light';
font-style: normal;
font-weight: 400;
src: local('FuturaStd-Light'), url('css/FuturaStd-Light.ttf') format('ttf');
}
#fontface1{font-family : Font1; }
h1{font-family : Font1; }
#fontface2{font-family : Font2; }
#nav a {font-family : Font2;}
so the french font i want to be displayed when using h1 and futura font when using #nav a
/* Typography
=============================================================== */
h1 { color:#cc6602; font-size:36px; font-family:FrenchScriptStd, arial, serif; font-weight:normal; padding-bottom:14px; }
#nav a {font-family:FuturaStd-Light, arial, serif; text-decoration:none; color:#a8241b; font-size:20px; text-shadow:0 1px #fff; display: block; }
In my pc it seems to work, but in some computers it is not displaying correctly,
Is there a way to correct this, maybe i am messing something up...
I would look into Paul Irish's bulletproof #font-face syntax as the reason why you cannot see the font on 'some computers' is the fact that these computers may have different browsers installed than the browser you were originally testing on that need different font files, other than TrueType.
A syntax that I use and have a lot of success with is:
#font-face {
font-family: 'FrenchScriptStd';
src: url('css/FrenchScriptStd.eot');
src: url('css/FrenchScriptStd.eot?#iefix') format('embedded-opentype'),
url('css/FrenchScriptStd.woff') format('woff'),
url('css/FrenchScriptStd.ttf') format('truetype'),
url('css/FrenchScriptStd.svg#FrenchScriptStd') format('svg');
font-weight: normal;
font-style: normal;
}
I believe that this is the #font-face style FontSquirrel uses.
Note that in your example you have not converted the font to various web formats. Here are some services that you can use online to get all of the files converted:
FontSquirell
Free Font Converter
OTF to WOFF
Font Kit Generator
You should then host these font files locally as you may run into issues with MIME types and headers and the FireFox browser not downloading the font files if the files are hosted externally and not on the same domain for which they are being used.
Also, your milage will vary in mobile browsers and older versions of IE. :)
The fonts have to be installed on every computers on which your web page shall be displayed.
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?