Delay loading my webfont - css

On my website I have a webfont hosted on my server and for a few weeks I realized that in Chrome, once loaded all the content of the page, it takes less than a second to load the font. Is there a way to optimize the load without delay?
I am loading the font by CSS in the following way:
#font-face {
font-family: 'webfont';
src: url('/global/fonts/webfont-regular-webfont.eot');
src: url('/global/fonts/webfont-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/global/fonts/webfont-regular-webfont.woff2') format('woff2'),
url('/global/fonts/webfont-regular-webfont.woff') format('woff'),
url('/global/fonts/webfont-regular-webfont.ttf') format('truetype'),
url('/global/fonts/webfont-regular-webfont.svg#webfontregular') format('svg');
font-weight: normal;
font-style: normal;
font-display: fallback;
}
Here the demo:

(function(){
// if firefox 3.5+, hide content till load (or 3 seconds) to prevent FOUT
var d = document, e = d.documentElement, s = d.createElement('style');
if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
s.textContent = 'body{visibility:hidden}';
var r = document.getElementsByTagName('script')[0];
r.parentNode.insertBefore(s, r);
function f(){ s.parentNode && s.parentNode.removeChild(s); }
addEventListener('load',f,false);
setTimeout(f,3000);
}
})();

Related

Custom css font isn't loading

here is the page where I want to add custom font http://pgkweb.ru/temp/1/index.html
So the fonts are:
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.ttf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.woff
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.otf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadPro-Cond.eot
And I call them from css (http://pgkweb.ru/temp/1/include/style.css):
/*FONTS*/
#font-face {
font-family: MyriadProCond;
src: url(include/MyriadProCondRegular/MyriadProCondRegular.ttf); /* Путь к файлу со шрифтом */
src: url(include/MyriadProCondRegular/MyriadProCondRegular.woff);
src: url(include/MyriadProCondRegular/MyriadProCondRegular.otf);
src: url(include/MyriadProCondRegular/MyriadPro-Cond.eot);
}
*, body, p,h3,h4 {
font-family: 'MyriadProCond', Arial, sans-serif;
color: #fff;
}
But as I see in FireFox code explorer it doesn't works (line-through). But why?
Your webfonts are inside the "include" folder, as is the stylesheet, i.e. they are both in the same folder, so you have to erase the folder name from the file path in the links, like:
src: url("MyriadProCondRegular/MyriadProCondRegular.ttf");
instead of
src: url("include/MyriadProCondRegular/MyriadProCondRegular.ttf");
the same with all the other URLs
Seems like you are missing quotes around each url, the syntax is also a little off:
#font-face {
font-family: MyriadProCond;
src: url('include/MyriadProCondRegular/MyriadPro-Cond.eot');
src: url('include/MyriadProCondRegular/MyriadProCondRegular.woff') format('woff'), /* Путь к файлу со шрифтом */
url('include/MyriadProCondRegular/MyriadProCondRegular.ttf') format('truetype'),
url('include/MyriadProCondRegular/MyriadProCondRegular.otf') format('otf');
}
See here: https://css-tricks.com/snippets/css/using-font-face/
If this doesn't work, check that the URLs are correct and the fonts are being downloaded (no 404 errors in the network tab).

Font-face as base64 with fallbacks

Following this threat I´d like to include a fontface as follows:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype'),
url('webfont.svg#svgFontName') format('svg');
}
But instead of loading files from the filesystem the filecontent is coming from a database as base64 string. My Question is do I have to add the base64 string for each format (woff,woff2,svg,eot,ttf)? like:
url(data:application/font-woff;charset=utf-8;base64,d09GMgABA…
url(data:application/font-woff2;charset=utf-8;base64,d09GMgABA…
url(data:application/x-font-truetype;charset=utf-8;base64,,d09GMgABA…
url(data:image/svg+xml;charset=utf-8;base648;base64,,d09GMgABA…
url(data:application/vnd.ms-fontobject;charset=utf-8;base64,d09GMgABA…
I´m asking because when looking at fontsquirrels generated base64 generated stylesheets they only provide one as base64 others as local files.
Base64 works with ttf-format.
Example:
#font-face {
font-family: "CustomFont";
src: url(data:font/truetype;charset=utf8;base64,AAEAAAAQAQAABAAAT...) format("truetype");
}

#font-face stopped working on certain fonts

I used #font-face on my website for 2 fonts.
One of them stopped working - I checked everything, tried different syntax but nothing brings it back.
Here is my CSS:
#font-face
{
font-family: 'gotham';
src:url(http://www.odednaaman.com/fonts/gothambook.eot) format('eot');
src:url(http://www.odednaaman.com/fonts/gothambook.ttf) format('truetype'), url(http://www.odednaaman.com/fonts/gotham-book.otf) format('opentype'), url(http://www.odednaaman.com/fonts/gothambook.woff) format('woff'), url(http://www.odednaaman.com/fonts/gothambook.eot?iefix) format('embedded-opentype');
}
#font-face
{
font-family: 'yank';
src: url(http://www.odednaaman.com/fonts/yank.ttf) format('truetype');
}
The "Yank" font still works perfectly. using chrome for QA.
website: www.odednaaman.com
any ideas?
Thanks,
Oded
The src should be only once but you're having two times in your first #font-face. So, use this:
#font-face
{
font-family: 'gotham';
src:url(http://www.odednaaman.com/fonts/gothambook.eot) format('eot'),
url(http://www.odednaaman.com/fonts/gothambook.ttf) format('truetype'),
url(http://www.odednaaman.com/fonts/gotham-book.otf) format('opentype'),
url(http://www.odednaaman.com/fonts/gothambook.woff) format('woff'),
url(http://www.odednaaman.com/fonts/gothambook.eot?iefix) format('embedded-opentype');
}
#font-face
{
font-family: 'yank';
src: url(http://www.odednaaman.com/fonts/yank.ttf) format('truetype');
}
From the console of Chrome:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.odednaaman.com/fonts/ygothambook.woff
So it seems that you need to upload the .woff file.

Merging multiple font files within one #font-face

I have the following code:
#font-face {
font-family: 'icomoon';
src:url('../fonts/icons/icomoon.eot?2hq9os');
src:url('../fonts/icons/icomoon.eot?#iefix2hq9os') format('embedded-opentype'),
url('../fonts/icons/icomoon.woff?2hq9os') format('woff'),
url('../fonts/icons/icomoon.ttf?2hq9os') format('truetype'),
url('../fonts/icons/icomoon.svg?2hq9os#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
now, the problem is that I'm forced to use multiple icon sets (from multiple files) and for my convinience and clean structure I want to have all those icons (from all the files) only within the one 'icomoon' font-face.
For example if:
../fonts/icons/icomoon.* includes icon-1 / icon-2 and icon-3
and
../fonts/icons/customicon.* includes icon-4 / icon-5
how can I include all of them to have within the
#font-face {
font-family: 'icomoon';
-- include multiple files --
}
div#selector { // will have con-1 / icon-2 / icon-3 / icon-4 / icon-5
font-family: icomoon;
}
is that possible at all?
I think that for this purpose you could use IcoMoon PLugin.
With it you can create a custom font combining FontAwesome with your icons and much more.

Garbage character displayed while printing web fonts from Google Chrome

I have a problem with printing web fonts from Google chrome v 18 but it works totally fine with IE and Firefox, I am using CSS file to pass the web fonts and the code for it is as follows.
#font-face {
font-family: 'C39P24DmTtNormal';
src: url('WebFonts/v100025_-webfont.eot');
src: url('WebFonts/v100025_-webfont.eot?#iefix') format('embedded-opentype'),
url('WebFonts/v100025_-webfont.woff') format('woff'),
url('WebFonts/v100025_-webfont.ttf') format('truetype'),
url('WebFonts/v100025_-webfont.svg#C39P24DmTtNormal') format('svg');
font-weight: normal;
font-style: normal;
}
Issue Screen-Shot:
Image Description:
In the above screen-shot all the ones marked in red are the bar-codes provided by the web fonts in CSS file but while printing are shown as above.
I tried to search on Google, but it seems to be a possible bug with Chrome and they are trying to fix it as soon as they can.
Is there any kind of workaround that can help me as I don't want my clients to install the fonts on each and every computer they use to browse my web application.
Put .svg at the start of the sources and try with different formats, like .svg as truetype:
#font-face {
font-family: 'EnzoOT-Medi';
src: url('font.eot');
src: url('font.svg') format('truetype'),
url('font.eot?#iefix') format('embedded-opentype'),
url('font.woff') format('woff'),
url('font.ttf') format('truetype'),
url('font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
I also had the same problem of disabled print preview from the settings but the problem in Google Chrome. It does not allow the web fonts to get loaded before printing, so just enable it back.
If you are using Windows.print on body.onLoad then remove that as its the real cause of the problem. This is only supported by Internet Explorer and not Google Chrome.
Example:
<body onload="window.print();">
Remove the onload and I hope it does the trick. If you have tried this then I am sorry.
In my case it was due to the use of relative font-size in vw. I put a rule in #media print {} with size in pt and worked perfect. The funny thing was that it was only happening in Chrome.
The real fix for this issue is to not load the webfonts async on preformatted print pages. Doing so you can still use window.onload = window.print() to force the print dialog without any issues.
<script>
WebFontConfig = {
typekit: { id: 'xxxxxx' }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js';
wf.type = 'text/javascript';
wf.async = 'false';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>

Resources