Chrome and Safari are showing the (local) be fonts correctly, but Firefox isn't.
The code I got from Fontsquirl added ' marks in the code, which I got rid of, but it's still not working:
Original code:
#font-face {
font-family: 'frutigerboldcn';
src: url('frutiger_67_bold_condensed-webfont.eot');
src: url('frutiger_67_bold_condensed-webfont.eot?#iefix') format('embedded-opentype'),
url('frutiger_67_bold_condensed-webfont.woff') format('woff'),
url('frutiger_67_bold_condensed-webfont.ttf') format('truetype'),
url('frutiger_67_bold_condensed-webfont.svg#frutigerboldcn') format('svg');
font-weight: normal;
font-style: normal;
I changed it into:
#font-face {
font-family: frutigerboldcn;
src: url(frutiger_67_bold_condensed-webfont.eot);
src: url(frutiger_67_bold_condensed-webfont.eot?#iefix) format(embedded-opentype),
url(frutiger_67_bold_condensed-webfont.woff) format(woff),
url(frutiger_67_bold_condensed-webfont.ttf) format(truetype),
url(frutiger_67_bold_condensed-webfont.svg#frutigerboldcn) format(svg);
font-weight: normal;
font-style: normal;
Fonts are loaded in the same folder as the stylesheet.
This is part of the stylesheet regarding the navigation:
#navigation .sf-menu a {
display: inline;
display: inline-block;
font-size: 16px;
text-transform: uppercase;
color: #008abf;
border-radius: 2px;
padding: 0 5px;
height: 26px;
line-height: 26px;
font-weight: normal;
letter-spacing: 1px;
font-family: frutigerboldcn;
How do I fix this? Thanx in advance
Put the following in your .htaccess and all will be fine, at least on modern FF versions.
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Go here for the full discussion on Stack Overflow:
CSS #font-face not working with Firefox, but working with Chrome and IE
#font-face {
font-family: 'ArialRounded';
src: url('ArialRounded.eot');
src: local('ArialRounded'), url('fonts/ArialRounded.eot'); /* for firefox */
}
#font-face {
font-family: 'ArialRounded';
src: url('ArialRounded.woff') format('woff'),
src: local('ArialRounded'), url('fonts/ArialRounded.woff'); /* for firefox */
url('ArialRounded.svg#ArialRounded') format('svg');
src: local('ArialRounded'), url('fonts/ArialRounded.svg'); /* for firefox */
}
Related
I created some icons using FontForge, and the icons work in all modern browsers except for Safari. What would be causing Safari to be the only browser that doesn't display the fonts?
This is the SCSS that is being used:
#font-face {
font-family: 'MyFont';
src: url('/assets/fonts/MyFont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.my-font-icon {
font-family: 'MyFont';
display: inline-block;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
&:before {
font-family: 'MyFont';
display: inline-block;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
&.my-font-questions:before {
content: "\0001";
}
&.my-font-chevron-left:before {
content: "\0002";
}
&.my-font-close:before {
content: "\0003";
}
}
Safari requires the TrueType/ttf font version and really you should be including several different types rather than just woff2 which is the most modern type. Here's a sample list from the CSS Tricks article here, the browser finds the font it understands and renders that one:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
FontForge should provide you these other font types, but if it doesn't, you'll need to go to FontSquirrel to render them (if you have the licence and permission to do so):
https://www.fontsquirrel.com/tools/webfont-generator
I started using icon fonts.
I got this bit working with IE8+, Chrome and Safari. However it is not working with Firefox.
#font-face {
font-family: 'tr-icon';
src:url('/fonts/myFont.eot?16p15w');
src:url('/fonts/myFont.eot?#iefix16p15w') format('embedded-opentype'),
url('/fonts/myFont.woff?16p15w') format('woff'),
url('/fonts/myFont.ttf?16p15w') format('truetype'),
url('/fonts/myFont.svg?16p15w#myFont') format('svg');
font-weight: normal;
font-style: normal;
}
.tr-icon-blah:before {
font-family: 'tr-icon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
moz-osx-font-smoothing: grayscale;
content: "\e605";
}
It is shown as being a character code in a box. I tried to access all my src with firefox and it worked.
Not sure what's going wrong here.
You may try removing the lines with .eot file type from the font-face declarations, if I remember correctly, FireFox had issues with it in the past.
HTML
<select multiple="multiple">
<option>Option-1</option>
<option>Option-2</option>
<option>Option-3</option>
<option>Option-4</option>
<option>Option-5</option>
</select>
CSS
#font-face {
font-family: 'OpenSansRegular';
src: url('OpenSans-Regular-webfont.eot');
src: url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg'),
url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('OpenSans-Regular-webfont.woff') format('woff'),
url('OpenSans-Regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
select {
width: 150px;
height: 150px;
padding: 10px;
font-size: 18px;
margin: 20px;
font-family: 'OpenSansRegular',Arial,sans-serif;
font-weight: normal;
}
I use OpenSans font as font-face with using fontsquirrel webfontkit tool. Everything seems normal for ff,ie,safari but when open page in chrome or opera, it seems as below image;
My code as above. Why fonts seems to be corrupted for chrome and opera?
Could you try to change the order of loaded source files?
Like putting the svg at the bottom of the list.
Maybe he's trying to render the svg inside of the select boxes and messing up there.
#font-face {
font-family: 'OpenSansRegular';
src: url('OpenSans-Regular-webfont.eot');
src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('OpenSans-Regular-webfont.woff') format('woff'),
url('OpenSans-Regular-webfont.ttf') format('truetype'),
url('OpenSans-Regular-webfont.svg#open_sansregular') 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>
Edit:
Chrome is somehow rendering the fonts i use via #font-face incorrectly. Which i found as i changed the font family of the inspected element to arial. The reason this might be, is because as i was searching for a fix on how chrome renders fonts so they appear more smooth instead of pixelated, i found that you could swap the order of the font formats and put the svg on top which would cause chrome to render it perfectly. As seen here.
So either the order is messing them up, or simply the font is broken in some way.
Now the question is, how do i use this font without breaking the site and keeping the fonts smooth?
Here is the #font-face code i use:
#font-face {
font-family: 'alegreya_scregular';
src: url('../includes/fonts/alegreyasc-regular-webfont.eot');
src: url('../includes/fonts/alegreyasc-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/alegreyasc-regular-webfont.svg#alegreya_scregular') format('svg'),
url('../includes/fonts/alegreyasc-regular-webfont.woff') format('woff'),
url('../includes/fonts/alegreyasc-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'droid_sansregular';
src: url('../includes/fonts/droidsans-webfont.eot');
src: url('../includes/fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg'),
url('../includes/fonts/droidsans-webfont.woff') format('woff'),
url('../includes/fonts/droidsans-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'droid_sansbold';
src: url('../includes/fonts/droidsans-bold-webfont.eot');
src: url('../includes/fonts/droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/droidsans-bold-webfont.svg#droid_sansbold') format('svg'),
url('../includes/fonts/droidsans-bold-webfont.woff') format('woff'),
url('../includes/fonts/droidsans-bold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I have some rendering issues on chrome. For some reason, the links right side gets cut off so the underlines will only fill half the of text, and the divs on the right side will not break off the words to a new line. It only happens some of the time and if i refresh the page a couple of times (differs how many times) it will fix itself eventually. Images are below.
Note: The site is in danish.
Images, underlined the issues in red:
http://i.stack.imgur.com/zJHXD.jpg
What causes this, and how do i fix it?
Note: This is for the navigation links
HTML:
<ul class="nav">
<li class="first"></li>
<li>Forside</li>
<li>Booking</li>
<li>Galleri</li>
<li>Begivenheder</li>
<li>Events</li>
<li>Politik</li>
<li>Kontakt</li>
</ul>
CSS:
.header .nav {
position: absolute;
overflow: hidden;
font-size: .70em;
bottom: -8px;
right: 16px;
}
.header .nav li {
float: left;
background: #171717 url(../images/site/nav_divider.png) repeat-y right;
text-transform: uppercase;
} .header .nav li:hover {
background: #1a1a1a url(../images/site/nav_divider.png) repeat-y right;
}
.header .nav .first {
width:2px;
height:31px;
margin-bottom:-0.95em;
}
.header .nav li a {
display: block;
padding: .75em .85em .75em .75em;
color: #e0e0e0;
text-decoration: none;
}
After a bit of searching on #font-face and chrome behaviour, i found a solution to the problem. Apparently moving the svg to the top will make the rendered font break the layout, so instead you should keep the original formatting and add a special media query, which will render the font smoothly in chrome while not breaking the layout.
Example:
#font-face {
font-family: 'droid_sansregular';
src: url('../includes/fonts/droidsans-webfont.eot');
src: url('../includes/fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/droidsans-webfont.woff') format('woff'),
url('../includes/fonts/droidsans-webfont.ttf') format('truetype'),
url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'droid_sansregular';
src: url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
}