I've been struggling with an issue for days now. I have a webfont kit from fontsquirrel. IE9 won't load the fonts when I load the containing webpage in an iframe. Weirdly enough, when I load the page in the browser itself, it does work. No errors in F12 developer tools.
The code:
<style type="text/css">
html, body {
margin: 0;
padding: 0 0 1em 0;
width: 100%;
height: 100%;
/*overflow-x: hidden;
overflow-y: auto;*/
overflow: hidden;
position: relative;
}
#font-face {
font-family: 'bebas_neueregular';
src: url('build/img/BebasNeue-webfont.eot?');
src: url('build/img/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('build/img/BebasNeue-webfont.woff') format('woff'),
url('build/img/BebasNeue-webfont.ttf') format('truetype'),
url('build/img/BebasNeue-webfont.svg#bebas_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
Related
Why do web fonts render differently between browsers, and what steps can be taken to fix the issue?
I'm having some issues with cross browser web font issues. I am absolutely positioning spans with single characters within them. Between browsers, the characters seem to be positioned the same relative to each other (within a few pixels).
However in IE, the grouping of characters is way off in relation to the rest of the flow of the document. The behavior when the characters are highlighted seems dramatically different in IE as well.
Does this have to do with font metrics? All 3 browsers are being rendered with a WOFF font.
Rendered in Chrome:
Rendered in Firefox:
Rendered in Internet Explorer:
Here is a snippet of the code:
<div style="border: 3px #000 solid; padding: 0px; line-height: 1; position: relative; width: 85.75px; height: 80px; font-size: 80px;">
<span class="MathJax_Main" style="position: absolute; left: 0; top: 0;">3</span>
<span class="MathJax_MathItalic" style="position: absolute; left: 40px; top: 0;">x</span>
</div>
Here is the CSS used to load the web font:
#font-face {
font-family: 'MathJax_Math';
src: url('woff/MathJax_Math-Italic.woff') format('woff'),
url('svg/MathJax_Math-Italic.svg#MathJax_Math') format('svg');
font-style: italic;
font-weight: normal;
}
#font-face {
font-family: 'MathJax_Main';
src: url('woff/MathJax_Main-Regular.woff') format('woff'),
url('svg/MathJax_Main-Regular.svg#MathJax_Main') format('svg');
font-weight: normal;
}
.MathJax_MathItalic {
font-family: 'MathJax_Math';
font-style: italic;
}
.MathJax_Main {
font-family: 'MathJax_Main';
}
I'm locally hosting my icons in the form of fonts, using #font-face in font.css.sass file, and referencing that in a generic style.css.scss file. (I've essentially copy-pasted-modified from a site for generating social media icons, PerfectIcons.com. The icons appear exactly as expected in all browsers except Firefox. Even so, Firefox receives and renders my other #font-face fonts with no issue.
Perhaps the problem is related to the svg file that is used for the social icons, and the way Firefox handles that?
NB. the asset_url below is something for Rails 4 and Heroku.
#font-face {
font-family: 'si';
src: asset_url('socicon.eot');
src: asset_url('socicon.eot?#iefix') format(embedded-opentype),
asset_url('socicon.woff') format(woff),
asset_url('socicon.ttf') format(truetype),
asset_url('socicon.svg') format(svg);
font-weight:400;
font-style:normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'si';
src: asset_url('socicon.svg') format(svg);
}
}
And then the style.css.scss:
.soc
overflow: hidden
margin: 0
padding: 0
list-style: none
text-align: right
margin-right: 100px
.soc li
display: inline-block
*display: inline
zoom: 1
.soc li a
font-family: si !important
font-style: normal
font-weight: 400
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
-ms-box-sizing: border-box
-o-box-sizing: border-box
box-sizing: border-box
text-decoration: none
text-align: center
display: block
position: relative
z-index: 1
width: 35px
height: 35px
line-height: 35px
font-size: 19px
#include border-radius(50px)
color: #c9c8c8
background-color: #383838
opacity: .8
.soc-icon-last
margin: 0 !important
.soc-twitter:before
content: 'a'
.soc-facebook:before
content: 'b'
.soc-google:before
content: 'c'
The format specifiers need to be in quotes as shown below:
#font-face {
font-family: 'si';
src: asset_url('socicon.eot');
src: asset_url('socicon.eot?#iefix') format('embedded-opentype'),
asset_url('socicon.woff') format('woff'),
asset_url('socicon.ttf') format('truetype'),
asset_url('socicon.svg') format('svg');
font-weight:400;
font-style:normal;
}
Just replace this code with your code:
#font-face {
font-family: 'si';
src: url('<%= asset_path('socicon.eot') %>');
src: url('<%= asset_path('socicon.eot) + '?#iefix' %>') format('embedded-opentype'),
url('<%= asset_path('socicon.woff') %>') format('woff'),
url('<%= asset_path('socicon.ttf') %>') format('truetype'),
url('<%= asset_path('socicon.svg') %>') format('svg');
font-weight:400;
font-style:normal;
}
Change css file extention to .css.scss.erb
I have a problem with my icomoon font in Chrome with that icons are sometimes not shown. I don't get the font-missing empty rectangle "fallback".
When I select the element with an icon it will appear, so a repaint will fix it. But forcing a repaint is a terrible solution...
The only solution I find regarding buggy iconfonts in Chrome is to use PUA codes, but I already do that.
My CSS for icons:
.icon-back-in-time-mirror:before {
content: "\e613";
}
.icon {
position: relative;
}
.icon:before {
position: absolute;
height: 22px;
margin: -11px 0 0;
top: 50%;
left: 0;
font-family: 'icomoon';
font-weight: 400;
line-height: 22px;
display: block;
speak: none;
}
The #font-face rules
#font-face {
font-family: 'icomoon';
src:url('/gui/css/fonts/icomoon.eot?-cpkbjx');
src:url('/gui/css/fonts/icomoon.eot?#iefix-cpkbjx') format('embedded-opentype'),
url('/gui/css/fonts/icomoon.woff?-cpkbjx') format('woff'),
url('/gui/css/fonts/icomoon.ttf?-cpkbjx') format('truetype'),
url('/gui/css/fonts/icomoon.svg?-cpkbjx#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
This is my CSS code:
The font is not working. Did I miss something?
I want to mention that it's not installed on the local OS and I'm sure that the URL goes to the font exactly
#font-face {
font-family: 'ma';
src: url('http://localhost/header/images/FS_Old.ttf');
}
.menu_head {
width: 100%;
position: relative;
height: 30px;
font-family: 'ma';
}
Ryan is right. I replaced your URL with a working URL and it works absolutely fine.
This is what I used.
#font-face {
font-family: 'ma';
src: url('http://www.cse.buffalo.edu/~rsd7/BaroqueScript.ttf');
}
.menu_head {
width: 100%;
position: relative;
height: 30px;
font-family: 'ma';
}
It should probably because Chrome, Firefox ,IE does not support ttf extension. You can try to put other extension:
#font-face {
font-family: 'ma';
src: url('FS_Old.eot'); /* IE9 Compat Modes */
src: url('FS_Old.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('FS_Old.ttf.woff') format('woff'), /* Modern Browsers */
url('FS_Old.ttf.ttf') format('truetype'), /* Safari, Android, iOS */
}
I used this website to convert the font to other types http://www.fontsquirrel.com/tools/webfont-generator and used a different supported font type and that seems to have solved the problem. Here is new code that works with all browsers.
<html>
<head>
<style>
#font-face {
font-family: 'baroque_scriptregular';
src: url('baroquescript.eot');
src: url('baroquescript.eot?#iefix') format('embedded-opentype'),
url('baroquescript.woff') format('woff'),
url('baroquescript.ttf') format('truetype'),
url('baroquescript.svg#baroque_scriptregular') format('svg');
font-weight: normal;
font-style: normal;
}
.menu_head {
width: 100%;
position: relative;
height: 30px;
font-family: baroque_scriptregular;
}
</style>
</head>
<body>
<div class="menu_head" >
hellod
</div>
</body>
I'm coding my first site, and didn't realize how frustrating cross-browser compatibility would be. Here's my site: http://www.tommaxwell.me. It looks the way I want it to in Safari and Chrome (maybe because they're Webkit?), but in Opera and Firefox, the spacing between the first header and the tagline is way too much. I can't figure out how to fix this. I read something about CSS Reset's, but I'm not sure how to use it or exactly what it is.
CSS:
body {
background-image:url(209241_2453996366505_1946848896_o.gif);
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
padding:0;
margin:0;
}
#font-face {
font-family: 'klavika_rgregular';
src: url('klavika-regular-webfont.eot');
src: url('klavika-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('klavika-regular-webfont.woff') format('woff'),
url('klavika-regular-webfont.ttf') format('truetype'),
url('klavika-regular-webfont.svg#klavika_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'klavika_mediummedium';
src: url('klavikamedium-osf-webfont.eot');
src: url('klavikamedium-osf-webfont.eot?#iefix') format('embedded-opentype'),
url('klavikamedium-osf-webfont.woff') format('woff'),
url('klavikamedium-osf-webfont.ttf') format('truetype'),
url('klavikamedium-osf-webfont.svg#klavika_mediummedium') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
text-align: center;
margin-top: 10%;
font-family: klavika_mediummedium;
color:#FFFFFF;
font-size: 6.250em;
font-weight: 400;
}
p {
position: relative;
top:-8%;
text-align: center;
font-family: klavika_rgregular;
color:#FFFFFF;
font-size: 1.875em;
font-weight: 400;
}
ul {
position: relative;
list-style-type: none;
margin-top: 5%;
margin-left: 37%;
font-family: klavika_mediummedium;
}
ul li {
font-size: 2.500em;
font-weight: 400;
float: left;
padding-right: 3%;
}
You should use doctype(first line in html file).
For better CSS and cross-browser compatibility use reset:
http://meyerweb.com/eric/tools/css/reset/
Choose HTML5 Boilerplate as your default template, it comes with Normalize CSS which resets the default settings of all browsers.
HTML5 Boilerplate has comments on almost each line of CSS and HTML, these comments makes it more easy to use.
Your solution is in setting line-height: 30px; to h1 element because h1 has too large font-size so you have to adjust line-height
Just replace my p tag class into your css :-
CSS
p {
color: #FFFFFF;
font-family: klavika_rgregular;
font-size: 1.875em;
font-weight: 400;
margin: 0;
padding: 0;
text-align: center;
}