I am trying to use Open Sans (Turkish version)
I am pretty sure i applied correct syntax. however Turkish character looks different in IE 7,8
IE 9
IE8 and IE7
#font-face {
font-family: 'open_sansregular';
src: url('Fonts/OpenSans-Regular-webfont.eot');
src: url('Fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('Fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('Fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('Fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'open_sanssemibold';
src: url('Fonts/OpenSans-Semibold-webfont.eot');
src: url('Fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('Fonts/OpenSans-Semibold-webfont.woff') format('woff'),
url('Fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
url('Fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
font-weight: normal;
font-style: normal;
}
EDIT
This is strange I uploaded example here and it works perfectly. Problem still exist on localhost
I am using VS 2013 and IIS Express 8.0
Solution
download fonts from font-squirrel
Upload them to font-squirrel's Font-Generalor
Check Keep existing in Trutype Hinting Section
Related
I was testing out my site on Android 5.0.2 and I can't seem to get the fonts loaded correctly. I am wondering if I am using this font-face wrong. Have a look see:
#font-face {
font-family: 'AgencyFB-Reg';
src: url('fonts/AgencyFB-Reg.eot') ;
src: url('fonts/AgencyFB-Reg.eot?#iefix') format('embedded-opentype'),
url('fonts/AgencyFB-Reg.woff') format('woff'),
url('fonts/AgencyFB-Reg.ttf') format('truetype'),
url('fonts/AgencyFB-Reg.svg#AgencyFB-Reg') format('svg');
font-weight: normal;
font-style: normal;
}
I am working on a site with Font Face but my client's IE 11 and 12 are not loading them. After testing endlessly on many machines, and always having success, I am convinced that their IE are defaulted to not allow embedding. Is there a way around this?
Here is my CSSS
#font-face {
font-family: 'hirukoregular';
src: url('fonts/thinkdust_-_hiruko-webfont.eot');
src: url('fonts/thinkdust_-_hiruko-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/thinkdust_-_hiruko-webfont.woff2') format('woff2'),
url('fonts/thinkdust_-_hiruko-webfont.woff') format('woff'),
url('fonts/thinkdust_-_hiruko-webfont.ttf') format('truetype'),
url('fonts/thinkdust_-_hiruko-webfont.svg#hirukoregular') format('svg');
font-weight: normal;
font-style: normal;
}
I am developing a responsive web application. I encountered a problem that the font family doesn't work as expected on mobile, but it works as expected on a computer. Why is this the case?
Code:
HTML
<link href="css/fonts/fonts.css" rel='stylesheet' type='text/css' />
CSS
#font-face {
font-family: 'uni_sans_regularregular';
src: url('uni-sans-regular-webfont.eot');
src: url('uni-sans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-regular-webfont.woff') format('woff'),
url('uni-sans-regular-webfont.ttf') format('truetype'),
url('uni-sans-regular-webfont.svg#uni_sans_regularregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_lightregular';
src: url('uni-sans-light-webfont.eot');
src: url('uni-sans-light-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-light-webfont.woff') format('woff'),
url('uni-sans-light-webfont.ttf') format('truetype'),
url('uni-sans-light-webfont.svg#uni_sans_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_bold_italicitalic';
src: url('uni-sans-bolditalic-webfont.eot');
src: url('uni-sans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-bolditalic-webfont.woff') format('woff'),
url('uni-sans-bolditalic-webfont.ttf') format('truetype'),
url('uni-sans-bolditalic-webfont.svg#uni_sans_bold_italicitalic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_boldregular';
src: url('uni-sans-bold-webfont.eot');
src: url('uni-sans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-bold-webfont.woff') format('woff'),
url('uni-sans-bold-webfont.ttf') format('truetype'),
url('uni-sans-bold-webfont.svg#uni_sans_boldregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_lightregular';
src: url('uni-sans-light-webfont.eot');
src: url('uni-sans-light-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-light-webfont.woff') format('woff'),
url('uni-sans-light-webfont.ttf') format('truetype'),
url('uni-sans-light-webfont.svg#uni_sans_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_thinregular';
font-weight: normal;
font-style: normal;
}
Thanks in advance
First, open your SVG file with a text editor and find out if the name you've written in the hashtag for the SVG matches what it says in the file.
If it matches, try this, if not, adjust accordingly.
#font-face {
font-family: 'uni_sans_regular';
src: url('uni-sans-regular-webfont.svg#uni_sans_regularregular') format('svg');
src: url('uni-sans-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body { font-family:'uni_sans_regular',Arial,sans-serif; }
If the font still doesn't display on mobile then I'd assume your SVG or WOFF font files are corrupt, the path to the font file is not correct, or the files aren't downloading to the mobile device for some other reason (slow connection perhaps).
The SVG file should work for Firefox 3.5, Chrome 0.3, Safari 3.1, Opera 9, and all iOS devices. The TTF file will pick up IE9 and Android 2.2. You don't need the EOT file unless you want to cover IE8-. I just reduced it to the minimum number of includes so you can narrow down the issue.
If your hosting the file on an IIS server, you may need to adjust your server settings. IIS will not serve files with unknown MIME types so you must set the MIME type for SVG to image/svg+xml, similarly for WOFF. Instructions from Microsoft (link)
If your testing with a 3rd party browser app on your mobile device, try testing on the default browser that comes with the device because many 3rd party apps have their own quirks.
I integrated a font into my web project. Here comes the CSS code:
#font-face {
font-family: 'vladimirscriptefregular';
src: url('fonts/vladimirscriptef-webfont.eot');
src: url('fonts/vladimirscriptef-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/vladimirscriptef-webfont.woff') format('woff'),
url('fonts/vladimirscriptef-webfont.ttf') format('truetype'),
url('fonts/vladimirscriptef-webfont.svg#vladimirscriptefregular') format('svg');
font-weight: normal;
font-style: normal;
}
My problem is that the font is not displayed in Firefox - instead, Times New Roman is displayed. In all other browsers the font is displayed correctly.
Does anyone see what's missing in my code?
Try the code below:
#font-face {
font-family: 'vladimirscriptefregular';
-moz-font-family:'vladimirscriptefregular';
src: url('fonts/vladimirscriptef-webfont.eot');
src: url('fonts/vladimirscriptef-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/vladimirscriptef-webfont.woff') format('woff'),
url('fonts/vladimirscriptef-webfont.ttf') format('truetype'),
url('fonts/vladimirscriptef-webfont.svg#vladimirscriptefregular') format('svg');
font-weight: normal;
-moz-font-weight:normal
font-style: normal;
-moz-font-style:normal
}
Firefox has a list of fonts which can be used in its whitelist.
It can be accessed by typing "about:config" in the address bar.
Then search for "font.system.whitelist".
Here add your font name which must be present in the Font folder.
For windows the default location is "C:\Windows\Fonts"
My site: http://arethebaronsplaying.com/
isn't rendering fonts correctly in IE 10 or IE 11. Here's my css:
#font-face {
font-family: 'Mono Social Icons Font';
src: asset_url('fonts/MonoSocialIconsFont-1.10.eot');
src: asset_url('fonts/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
asset_url('fonts/MonoSocialIconsFont-1.10.woff') format('woff'),
asset_url('fonts/MonoSocialIconsFont-1.10.ttf') format('truetype'),
asset_url('fonts/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
src: asset_url('fonts/MonoSocialIconsFont-1.10.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'hamilton18';
src: asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.eot');
src: asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.eot?#iefix') format('embedded-opentype'),
asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.woff') format('woff'),
asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.ttf') format('truetype'),
asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.svg#MonoSocialIconsFont') format('svg');
src: asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Everything looks great in chrome/safari/firefox. Any ideas?
To solve this problem just add -ms-font-feature-settings:"liga" 1; to your css
for example:
.social .icon {
-ms-font-feature-settings:"liga" 1;
font-family:'Mono Social Icons Font';
-webkit-text-rendering:optimizeLegibility;
-moz-text-rendering:optimizeLegibility;
-ms-text-rendering:optimizeLegibility;
-o-text-rendering:optimizeLegibility;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
font-smoothing:antialiased;
}
Looking at the console in IE of your website, there appear following error -
"CSS3114: #font-face failed OpenType embedding permission check. Permission must be Installable."
On web, these are the two links which talk about this issue and common solution:
https://github.com/tapquo/lungo.icon/issues/1
and
http://codecanyon.net/forums/thread/css3114-fontface-failed-opentype-embedding-permission-check-permission-must-be-installable/78963
common solution link:
http://carnage-melon.tom7.org/embed/
However the talked tool seems available only for older version of windows and not for latest version of windows.