I have a problem with my custom iconfont in Google Chrome, only on Mac. They are cutted off at the edge. I already tried to
use greater svg's and
prefer the SVG (before woff)
play with css settings
You can see it live at kuyichi.com (if you have Chrome and OSX)
The icons don't have a border, the roundings are with the icons itself.
Is there anybody how to fix this?
live view:
http://i.stack.imgur.com/niqcP.png
the iconpack on icomoon:
http://i.stack.imgur.com/PwyCm.png
#font-face {
font-family: 'iconfont';
src:url('fonts/iconfont.eot?nr90fm');
src:url('fonts/iconfont.eot?#iefixnr90fm') format('embedded-opentype'),
url('fonts/iconfont.woff?nr90fm') format('woff'),
url('fonts/iconfont.ttf?nr90fm') format('truetype'),
url('fonts/iconfont.svg?nr90fm#iconfont') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icons-"], [class*=" icons-"] {
font-family: 'iconfont';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icons-knit:before {
content: "\e628";
}
Try adding size information to your icon delcaration:
.icons-knit:before {
content: "\e628";
width:40px;
height:40px;
font-size:20px;
}
Related
I'm using google material Icon font library for the majority of icons in a web app. I've started debugging for Microsoft Edge and realised none of them are showing.
Is this a known issue? I can switch to actual icon images if need be but it would be a massive job at this stage.
Try to use F12 developer tools to check whether the Google Icons CSS reference load success.
The following code works well on Edge 42 and Edge 44 version:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'), url(https://example.com/MaterialIcons-Regular.woff) format('woff'), url(https://example.com/MaterialIcons-Regular.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';
}
</style>
<i class="material-icons">face</i>
The output screenshot as below:
I'm trying to get a site up and running for a client but I'm having issues with the fonts. All of the fonts are working properly except for one, and I'm not sure why. The problem is even worse in Internet Explorer where 2 fonts don't work, and in Edge where nothing works. This is the code I'm using. The font that isn't working is "chunkfive".
#font-face {
font-family: 'chunkfive';
src: url('fonts/chunkfive-webfont-webfont.woff2') format('woff2'),
url('fonts/chunkfive-webfont-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'roboto';
src: url('fonts/roboto-regular-webfont.woff2') format('woff2'),
url('fonts/roboto-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'streetwear';
src: url('fonts/streetwear-webfont.woff2') format('woff2'),
url('fonts/streetwear-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1,
h2,
h3,
h4,
h5 {
font-family: streetwear, serif;
}
nav {
background: #000;
border: solid 4px #FFF;
font-family: chunkfive, serif;
font-size: 22px;
left: 50%;
margin-left: -425px;
position: absolute;
top: 143px;
width: 850px;
z-index: 0;
}
ol,
p,
ul {
font-family: roboto, sans-serif;
font-size: 18px;
}
The fonts all work perfectly on my free website, but when posted on an account with GoDaddy, they haven't been working properly. Using chrome, I get the following error for each font, even though the fonts other than chunkfive display correctly:
GET http://website-url.com/css/fonts/streetwear-webfont.woff2
Does GoDaddy somehow restrict the way you can use fonts, or is there something else I need to fix?
THere are 2-3 things you can do to make this problem go away-
1. Check the linking is correct.
2. Try to use double quotes instead of single.
3. Check font folder premission as that is the main problem with go daddy.
After much review, I can't get the correct display of a custom font I created through fontsquirrel. Chrome's Inspector shows the icon is in place but all I get is this default icon box ;o(
Rails 4 app, Bootstrap
Any ideas?
application.rb:
config.assets.paths << Rails.root.join("app", "assets", "fonts")
html:
<div class="hatfont icon-balloon01"></div>
here's my CSS:
hatfont {
font-family: 'haticon';
text-transform: uppercase;
div {
font-family: haticon;
}
}
#font-face {
font-family: 'haticon';
src:assets-url('fonts/haticon.eot');
src:assets-url('fonts/haticon.eot?#iefix') format('embedded-opentype'),
assets-url('fonts/haticon.woff') format('woff'),
assets-url('fonts/haticon.ttf') format('truetype'),
assets-url('fonts/haticon.svg#haticon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'haticon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-graphs:before {
content: "\e600";
}
I've had this issue before myself. I can't identify the problem specifically from what you've provided, but a few things come to mind. Check your link references in your CSS. Make sure no files were moved and that your stylesheet is in the same directory as your fonts folder. Also, the %> under your font-face looks out of place... I don't know if that's a Rails thing or not. Here's an example of something that I've used before that's worked. Obviously, you'd need to substitute your font files. :
#font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.0.3');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),url('fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),url('fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),url('fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
I've a problem with the #font-face declaration. In Firefox and Chrome works but in Safari 5.5 doesn't work, i see the Times New Roman font when I put in the declaration the MinionPro-Regular font. I searched in other questions about this problem and I put the font-weight: normal; font-style: normal; but the problem persists. I generated the #font-face code with web font generator of Font Squirrel.
My #font-face declaration is this
#font-face {
font-family: 'MinionPro-Regular';
src: url('/fonts/MinionPro-Regular.eot?#iefix') format('eot'),
url('/fonts/MinionPro-Regular.otf') format('opentype'),
url('/fonts/MinionPro-Regular.woff') format('woff'),
url('/fonts/MinionPro-Regular.ttf') format('truetype'),
url('/fonts/MinionPro-Regular.svg#MinionPro-Regular') format('svg');
font-weight: normal;
font-style: normal;
The css is this
#block-system-main-menu{
font-family: 'MinionPro-Regular';
font-size: 22px;
letter-spacing: 3px;
line-height:1.2;
}
What happens?
Thanks!
This question already has answers here:
Why should we include ttf, eot, woff, svg,... in a font-face
(3 answers)
Closed 9 years ago.
I have the following in my LESS/css file:
#font-face {
font-family: 'FontAwesome';
src: url('/Content/font-awesome/fontawesome-webfont.eot?v=3.0.1');
src: url('/Content/font-awesome/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('/Content/font-awesome/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('/Content/font-awesome/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="fa-icon-"],
[class*=" fa-icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}
My application works and shows icons correctly but I am confused about which of these files will be used. I am using all modern browsers IE9, lastest Chrome, Firefox and Safari.
We add font in different formats because every browser has its own way of rendering fonts so font in different formats are included.