I am trying to add font for displaying currency sign (Russian rouble). Code that I am using taken from here. Also i added magic zoom: 1;. But it don't work.
Font-face defenition
#font-face {
font-family: "Rouble";
src: url('/catalog/view/font/rouble.eot'); /* IE9 Compat Modes */
src: url('/catalog/view/font/rouble.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/catalog/view/font/rouble.woff') format('woff'), /* Modern Browsers */
url('/catalog/view/font/rouble.ttf') format('truetype'), /* Safari, Android, iOS */
url('/catalog/view/font/rouble.svg#Rouble') format('svg'); /* Legacy iOS */
}
Then usage
.rubl {
font-family: "Rouble";
font-style: normal;
font-weight: normal;
zoom: 1;
}
I test it with ie7 from Win Vista under WM VirtualBox taken from here (if it is matter).
What am I doing wrong?
Live example you can see here (Login/Password: demo/demo)
Testing on IE 11 in IE 7 mode, the console shows an error with code CSS3111, referring to rouble.eot, with additional data “terminating; too few slides: 0”. Looks a bit odd, but apparently the EOT file is corrupt. The same problem appears in EOT mode, whereas IE 9 and newer use the WOFF file.
Quite apart from this, the page uses font trickery rather than a proper approach: the HTML markup has <span class="rubl"> a</span>, and CSS settings are used in an attempt at making the browser misreprsent the letter “a” as the ruble sign. This trickery works since the font claims that the ruble sign is a glyph for the letter “a”.
Related
I have a webpage where I'm using the "font-family: Poppins-Medium;"
In my PC the font is displayed correctly.
However, in other PCs, only "Times New Roman" font is displayed.
May someone give me a help?
See CSS code:
.txt2 {
font-family: Poppins-Regular;
font-size: 14px;
color: #999999;
line-height: 1.5;
}
Thanks.
PS: This is the link to the page:
http://ez2main.somee.com/estock/cliadd.asp
In order to use custom font you should first declare #font-face.
It's all written on that link, but let me sum it a little:
step 1: upload font files to the server
step 2: declare font name and use the src property to link those files.
step 3: Now custom font will show on every browser since they available on the server.
Hope that helps!
When this happens to me it is because I have the font installed on my computer but no on the server. Make sure to set up your custom font with #font-face before using it.
#font-face {
font-family: 'Poppins-Regular';
src: url('../font/Poppins-Regular.eot'); /* IE9 Compat Modes */
src: url('../font/Poppins-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/Poppins-Regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../font/Poppins-Regular.woff') format('woff'), /* Modern Browsers */
url('../font/Poppins-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
}
Also make sure to add appropriate fall back fonts to make it fail more gracfully.
font-family: Poppins-Regular, 'second-closest-font', Arial, etc;
I recommend using websafe fonts instead.
https://www.w3schools.com/cssref/css_websafe_fonts.asp
The browser that does not have those fonts installed, tries to load them from the URL http://ez2main.somee.com/fonts/poppins/Poppins-Regular.ttf and that is not a valid URL.
If you provide want to provide those fonts, you should make them available from your server. Otherwise, use standard fonts that every browser would have.
trying to add a custom font into my wordpress website but it's just not working. I tried using one of the plugins but I only see the change in font in 'edit mode' but when i actually go on the public webaddress the font does not load.
I've converted futura condensed light into the various types and added this in my style.css on the theme I'm using
#font-face {
font-family: 'Conv_futura-condensedlight-normal';
src: url('fonts/futura-condensedlight-normal.eot');
src: url('fonts/futura-condensedlight-normal.eot?#iefix') format('embedded-opentype'),
url('fonts/futura-condensedlight-normal.woff') format('woff'),
url('fonts/futura-condensedlight-normal.ttf') format('truetype'),
url('fonts/futura-condensedlight.svg#Conv_futura-condensedlight-normal') format('svg');
font-weight: normal;
font-style: normal;
}
and also added this
h7{font-family: 'Conv_futura-condensedlight-normal';}
On the page where I want the text to change I have:
<h7>LOGIN</h7>
but the text does not change..
I've also uploaded the files into the fonts folder in the theme directory (where other fonts are)
Can't seem to find the bug. Help would be appreciated!
Try #font-face for custom fonts. Use below code.
#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 */
}
and specify it as below :
font-family: 'MyWebFont', Fallback, sans-serif;
Refer : https://css-tricks.com/snippets/css/using-font-face/
They may be several reasons but the first thing I'm seeing wrong is the <h7> tag because it doesn't exist. You should use from h1 to h6.
If that doesn't solve the issue please try with browser's console as #War10ck said, missing files is a signal of path issues.
When I created a custom font and used it on my website, this was the CSS I used:
#font-face {font-family:'CUSTOM_FONT_NAME';src:local('CUSTOM_FONT_NAME'), url(http://MY_URL/MY_FONT_PATH/MY_FONT.ttf) format('truetype');}
.my_custom_font_class {font-family:'CUSTOM_FONT_NAME',serif;}
I believe I had to use a global path to get my font to load, so you might try that.
The src:local('CUSTOM_FONT_NAME') part is just to verify that it's working at all from your machine with the font installed. (You'll need the font name to match the name it's registered under in your machine, in this case).
I have searched this on net found many articles and tutorials, I followed some of them but still not getting the desired results.
I have downloaded the font and place this in the my project folder. This is the code I am writing but it's not changing the font-style.
#font-face
{
font-family: Montereybold;
src: url(font/Montereybold.ttf);
}
h1
{
font-size:36px;
font-family:Montereybold;
}
Kindly guide me what I am doing wrong here.
Thanks
¿Have you tried quoting the font name? Also, for better compatibility, upload several font formats.
#font-face {
font-family: 'Montereybold';
src: url('font/Montereybold.eot'); /* IE9 Compat Modes */
src: url('font/Montereybold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/Montereybold.woff') format('woff'), /* Modern Browsers */
url('font/Montereybold.ttf') format('truetype'), /* Safari, Android, iOS */
url('font/Montereybold.svg#Montereybold') format('svg'); /* Legacy iOS */
font-weight:normal;
font-style:normal;
}
Using it:
font-family:'Montereybold';
Maybe the url is wrong. Is there "font" folder in parent folder of your css file ? Otherwise, try "../font/Montereybold.ttf".
Also, ttf is not supported by all browser. Use font-face generator for a best result : http://www.fontsquirrel.com/tools/webfont-generator .
I'm using an icon font throughout a site I have been building, and just noticed that the font does not display in IE10 on Windows 8 only. The font works fine in IE10 on Windows 7, and in Chrome/FF across the board.
Worth noting that SOME fonts from this set DO work in IE10/Windows 8. E.g. '\2699' works, but '\E744' does NOT work in IE10/Windows 8.
UPDATE: Here is a JSFiddle that exhibits the issue: http://jsfiddle.net/wqs5C/
Can anyone help me understand why it may not be working?
Here is the font declaration:
#font-face {
font-family: 'icons';
src: url("../Fonts/icons.eot");
src: url("../Fonts/icons.eot?#iefix") format('embedded-opentype'),
url("../Fonts/icons.woff") format('woff'),
url("../Fonts/icons.ttf") format('truetype'),
url("../Fonts/icons.svg#icons") format('svg');
font-weight: normal;
font-style: normal;
}
Here is the style (in IE10 developer tools, these have a line through them):
.exp_closed > .widget-head > .toggle:after {
content: '\E744';
font-family: 'icons';
font-size: 16px;
}
So I've ultimately traced this back to "Protected Mode" in IE10. It was preventing ALL icon fonts from working. As soon as I disabled it, everything started acting like I'd expect it to. The failures in FF on the JSFiddle are likely from cross-domain restrictions on font downloads.
In my previous question:
#font-face - how to make it work on all browsers
I was asking a way how make #font-face to work on all browsers. Mainly the answer was to use this:
#font-face {
font-family: 'Name';
src: url('location.eot');
src: url('location.eot#iefix') format('embedded-opentype'),
url('location.woff') format('woff'),
url('location.ttf') format('truetype'),
url('location.svg#Name') format('svg');
font-weight: normal;
font-style: normal;
}
Generally it works. I see that even IE7 and IE8 get the font style even if here it is clearly stated:
Note: Internet Explorer 8 and earlier versions, do not support the #font-face rule.
But only problem I have is with Myriad Pro Regular font type. In IE7 and IE8 it is much wider then in all other browsers and it totally breaks my design moving out some text fragments from boundaries, changing the line and so ... How to fix also this problem?