#font-face {
font-family: 'advertisingmediumregular';
src: url('fonts/advertisingmedium-webfont.eot');
src: url('fonts/advertisingmedium-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/advertisingmedium-webfont.woff') format('woff'),
url('fonts/advertisingmedium-webfont.ttf') format('truetype'),
url('fonts/advertisingmedium-webfont.svg#advertisingmediumregular') format('svg');
font-weight: bold;
font-style: normal;
}
the text disappear in google chrome when I wrote this code can anyone help me please
I already had the same problem. I was adviced to generate my web fonts with a tool like the FontSquirrel webkit fonts generator. Upload your font's files and download back a all browsers compatible pack. Include the css in your HTML page in addition to yours. And it seems to work since I do like this. I hope it will be the same for you.
Related
I've been supplied an OTF font from a client and not following the web font trends for a while now in terms of support, if I remember correctly, the pattern used for cross browser support for web fonts would look like this:
#font-face {
font-family: 'AvalonBook';
src: url('Avalon-Book-webfont.eot');
src: url('Avalon-Book-webfont.eot?#iefix') format('embedded-opentype'),
url('Avalon-Book-webfont.woff') format('woff'),
url('Avalon-Book-webfont.ttf') format('truetype'),
url('Avalon-Book-webfont.svg#AvalonBook') format('svg');
font-weight: normal;
font-style: normal;
}
Probably because I've been so used to copying and pasting the above code and modifying it to my needs, I haven't got the chance to actually understand the reasons behind this pattern.
This begs the question, is OTF even supported in the browsers? What browsers and versions? Also why is it not in the above #font-face declaration if it is supported?
Thanks.
I have two fonts that I wanted to include on my website for my logo, Bebas Neue Regular and Bebas Neue Thin.
I converted my fonts using font-squirrels online font conversion tool and have added the relevant #font-face code to my css:
#font-face {
font-family: BebasNeueReg;
src: url("/fonts/BebasNeueRegular.eot");
src: url("/fonts/BebasNeueRegular.eot?#iefix") format('embedded-opentype'),
url("/fonts/BebasNeueRegular.woff2") format('woff2'),
url("/fonts/BebasNeueRegular.woff") format('woff'),
url("/fonts/BebasNeueRegular.ttf") format('truetype'),
url("/fonts/BebasNeueRegular.svg") format('svg');
}
As you can see this is the #font-face css for the Bebas Neue Regular. For some strange reason the css #font-face for Bebas Neue Thin works absolutely fine in all browsers. This css is exactly the same apart from the src being different.
#font-face {
font-family: BebasNeueThin;
src: url("/fonts/BebasNeueThin.eot");
src: url("/fonts/BebasNeueThin.eot?#iefix") format('embedded-opentype'),
url("/fonts/BebasNeueThin.woff2") format('woff2'),
url("/fonts/BebasNeueThin.woff") format('woff'),
url("/fonts/BebasNeueThin.ttf") format('truetype'),
url("/fonts/BebasNeueThin.svg") format('svg');
}
I have tried multiple things such as, converting the font using different font conversion tool, swapping the order around of the url's.
Can anyone shed some light? Has anyone has this exact same problem before?
Thanks in advance.
I cleared everything and started again. Downloaded the fonts I wanted to be part of the project and then converted them to web fonts using the web font generator. I then added them back into the project and used the exact CSS #font-face that came in the zip file. This seems to have fixed things. May have been a corrupted open type font that I was trying to convert in the first place.
I use Brackets code editor and in the live preview it works perfectly but once I upload it onto the actual site it defaults to Arial. I've put the font in the css folder but I just don't understand why it doesn't work on the live site.
Here is my code.
#font-face {
font-family: BMgermar;
src: url('http://example.com/css/BMgermar.TTF') format('truetype');
}
Thanks in advance.
You Most Upload The Font In five Formats To Work Perfectly like This Code
#font-face {
font-family: 'droidkufi';
src: url('../fonts/droidkufi/droidkufi-webfont.eot');
src: url('../fonts/droidkufi/droidkufi-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/droidkufi/droidkufi-webfont.woff') format('woff'),
url('../fonts/droidkufi/droidkufi-webfont.ttf') format('truetype'),
url('../fonts/droidkufi/droidkufi-webfont.svg#droid_arabic_kufiregular') format('svg');
font-weight: normal;
font-style: normal;
}
And The Font Formats is:
eot
woff
ttf
svg
OR You Can Simply Import The fonts form https://www.google.com/fonts
The problem is the whole website doesn't show text until I inspect element with Chrome. It all works fine on other browsers.
I don't have any chrome extensions installed and am using an incognito window, but still nothing.
The website passes validation via W3C - the site is: http://www.toricks.com
I'm using #font-face, which by looking at it seems to be setup fine!
Can anyone shed any light on this?
You can try the Font Squirrel way of adding the #font-face like this:
#font-face {
font-family: 'Comfortaa';
src: url('comfortaa.eot');
src: url('comfortaa.eot?#iefix') format('embedded-opentype'),
url('comfortaa.woff') format('woff'),
url('comfortaa.ttf') format('truetype'),
url('comfortaa.svg#comfortaanormal') format('svg');
font-weight: normal;
font-style: normal;
}
I think this has the best cross-browser support. Make sure you convert your font to all the different types (you can do that with the Font Squirrel generator).
Check the site:
http://tinyurl.com/caljnqb
I'm using font-face:
#font-face {
font-family: 'SegoeUI';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeui.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.svg#SegoeUI2') format('svg');
font-style: normal;
font-weight: normal;
}
#font-face {
font-family: 'SegoeUIBold';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.svg#SegoeUI3') format('svg');
font-style: normal;
font-weight: bold;
}
#font-face {
font-family: 'SegoeUIItalic';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.svg#SegoeUI4') format('svg');
font-style: italic;
font-weight: normal;
}
And there is the problem with output in Firefox, Chrome and Opera browsers. Everything looks OK on IE. Font looks sharp. Why does it happens? Maybe I'm doing something wrong?
different browsers render fonts differently.
The solution I've used in the past is to re-arrange the order in which the fonts are supplied to the font face, based on which browser is rendering the page. Usually my problems are in the earlier versions of IE so I've used a separate style sheet that offered the .woff file before the ttf file. Because some browsers can only read certain font type files but can read both and stop looking after finding one that works. If you re-arrange them you may be able to use one that renders a bit better.
If you end up using separate css you can use the $_SERVER arrays http_user_agent property to set a font css based on the browser.
googles Droid font is a font that renders funny sometimes depending on the browser as well so researching that might help you find other approaches.
It seems that there are a few tricks in ordering properly each format
See for example
This is the Fontspring bulletproof syntax modified to serve the svg
first:
#font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’);
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘webfont.svg#svgFontName’) format(‘svg’),
url(‘webfont.woff’) format(‘woff’),
url(‘webfont.ttf’) format(‘truetype’);
}
From http://www.fontspring.com/blog/smoother-web-font-rendering-chrome
You may also take care of using the proper mime type for WOFF font , as of http://www.w3.org/TR/WOFF/#appendix-b
application/font-woff
to ensure proper handling by the browser