Incorrect displaing content CSS? - html

I have the following CSS code:
<i class="mce-ico mce-i-alignright"></i>
After this are ::before pseudo:
.mce-i-alignright:before {
content: "\e005";
}
So, it is displaying incorrect, like as square everywhere. Look at picture

Make sure you have the require font loaded. the box is to indicate the character is not found.
#font-face {
font-family: myFirstFont;
src: url(font_name.woff);
}
i{
font-family: myFirstFont;
}

You need to specify the font those symbols require in order to display the characters correctly. You may or may not have a variety of different formats available from the font creator, you should include as many as you can in your page as follows:
#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 */
}
i.mce-ico {
font-family: 'MyWebFont';
}

Related

Google Font doesn't load in Safari

Im working on this website:
poschbuchhandlung.at/hu/index.html
I tried to implement a Google Font with #font-face:
#font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
src: url('../fonts/inconsolata-v18-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
url('../fonts/inconsolata-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/inconsolata-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/inconsolata-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/inconsolata-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/inconsolata-v18-latin-regular.svg#Inconsolata') format('svg'); /* Legacy iOS */
}
This does work in Firefox but not in Safari!And I can't figure out how, I already spend furious hours browsing the internet!
What is the problem? Do you have any guess?
Thank you very much
Font is inside /hu folder
Instead of:
../fonts/inconsolata-v18-latin-regular.ttf
Use:
../hu/fonts/inconsolata-v18-latin-regular.ttf

Font-face using ttf remotely

I have a bit of code that I'm using to create barcodes using a Code39r.ttf font.
When using it on my local machine it seems to work fine
<html>
<head>
<style>
#font-face {
font-family:code;
src: url(Code39r.ttf);
}
#myFont {
color:#111111;
font-size:180px;
font-family:code;
}
</style>
</head>
<body>
<p id="myFont">123 456</p>
</body>
</html>
As soon as I try to load the font from an online source it never seems to load
https://jsfiddle.net/jhc7p69p/2/
not sure what could have gone wrong or if there is a reason for this
you use custom font you require more font file like.
#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 */
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}

#font-face not rendering on first page visit

I've added three fonts to my page with the #font-face css operative. Surfing to the page http://www.oefentherapie-fysiotherapie.nl/index.html shows the page, but does not load the fonts. Refreshing the page does not help. Browsing to another page does render the fonts, and returning to the original page with the back button makes the page render the font correctly.
The css for the page is:
#font-face {
font-family: 'Aller Regular';
src: url('Aller_Rg.eot'); /* IE9 Compat Modes */
src: url('Aller_Rg.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('Aller_Rg.woff2') format('woff2'), /* Super Modern Browsers */
url('Aller_Rg.woff') format('woff'), /* Pretty Modern Browsers */
url('Aller_Rg.ttf') format('truetype');
}
#font-face {
font-family: 'Aller Bold';
src: url('Aller_Bd.eot'); /* IE9 Compat Modes */
src: url('Aller_Bd.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('Aller_Bd.woff2') format('woff2'), /* Super Modern Browsers */
url('Aller_Bd.woff') format('woff'), /* Pretty Modern Browsers */
url('Aller_Bd.ttf') format('truetype');
font-weight: bold;
}
#font-face {
font-family: 'Turnpike';
src: url('/css/Turnpike.eot'); /* IE9 Compat Modes */
src: url('/css/Turnpike.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/css/Turnpike.woff2') format('woff2'), /* Super Modern Browsers */
url('/css/Turnpike.woff') format('woff'), /* Pretty Modern Browsers */
url('/css/Turnpike.ttf') format('truetype');
}
Are the fonts not rendering because the file is too large, so it is not completely read before the page is displayed?
Thanks in advance.

CSS #font-face eot ( HelveticaNeueLT Std Thin ) Not working for IE

I have wrote a css for add "HelveticaNeueLT Std Thin" font for my website. But that css doesn't work for IE browers, also that font can't convert to eot via http://www.fontsquirrel.com/tools/webfont-generator
That website gives error "Adobe has requested that their font HelveticaNeueLT Std Thin Regular be blacklisted by the Generator. You will not be able to convert this font."
So I convert this form another website but didn't work,
This is my css, this work for other browers, But IE has problem.
#font-face {
font-family: Helvetica_Thin;
src: url("fonts/HelveticaNeueLTStd-Th_0.otf") format("opentype");
src: url("fonts/HelveticaNeueLTStd-Th_new.eot"),
url("fonts/HelveticaNeueLTStd-Th.ttf") format('truetype'),
url("fonts/HelveticaNeueLTStd-Th_new.eot?#iefix") format('embedded-opentype');
}
this is link for download above font http://font2s.com/fonts/50728/helvetica_neue_lt_std_35_thin.html#.VBvpBxYsD3Y
Try to write this format
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

CSS #font-face not working in my CMS

This is the code I am using.
#font-face {
font-family:gotisch;
src:url('__cmsurl__/files/www/dscaslongotisch.ttf') format:('truetype');
}
h1{
font-family:gotisch;
}
the source is correct, the CMS automatically sets the url, but the font is not displayed in neither Chrome nor Firefox.
When I do use this code:
#font-face {
font-family:gotisch;
src:url('__cmsurl__/files/www/dscaslongotisch.ttf') format:('truetype');
}
#font-face {
font-family: gotisch_IE;
src:url('__cmsurl__/files/www/dscaslongotisch.eot');
}
h1{
font-family:gotisch, 'gotisch_IE';
}
it is working in IE, but still not in Firefox / Chrome
Firebug even shows me, that the font is loaded and I can change it to e.g. Verdana - but still, this one is just not displayed. I even tried fontsquirrel, but even then it did not display the font. Can anyone help me here?
Taken from here you can see that the fonts you provide (ttf and eot) are for IE, Safari, Android, iOS.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Convert the font to woff and include it like below if you want it to work in Firefox and Chrome.
#font-face {
font-family: 'gotisch';
src: url('path_to/gotisch.eot'); /* IE9 Compat Modes */
src: url('path_to/gotisch.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('path_to/gotisch.woff') format('woff'), /* Modern Browsers */
url('path_to/gotisch.ttf') format('truetype'), /* Safari, Android, iOS */
}
Then use it like this
selector {
font-family: 'gotisch';
}