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>
Related
I am trying to import a font (fontawesome version 4.4.0's webfont) I have located in a directory called 'fonts' inside my project:
I have read several StackOverflow posts and I'm trying to import it using #font-face inside css:
#font-face {
font-family: 'MyWebFont';
src: url('../fonts/fontawesome-webfont.eot');
src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2') format('woff2'),
url('../fonts/fontawesome-webfont.woff') format('woff'),
url('../fonts/fontawesome-webfont.ttf') format('truetype'),
url('../fonts/fontawesome-webfont.svg#svgFontName') format('svg');
}
And then using it in the body:
body {
margin: 0;
padding: 0;
font-family: 'MyWebFont';
}
However, it's not loading:
Any idea on why is this happening? I can actually see the expected font inside the files...
Thank you in advance.
Edit:
In the network tab in my browser's developer tools I can see the follwing info:
.
In the 'Response' tab inside Network, I get "failed to load response data". Maybe the problem is there?
Edit2:
Other fonts are being loaded just fine. For example, 'Raleway' (which is very similar, but not exactly the same. Notice the difference in the 'l'):
I am trying to get this font (I think it's Adobe's 'Proxima Nova', the same used in Fontawesome's site, that's the reason of the name)...
I think the problem is that font awesome is only for icons, not text.
If you go to fontawesome.com and remove this line of code:
.fa, .fas {
font-family: "Font Awesome 5 Pro";
}
You will see all the icons that have the class fa and fas will be just a rectangle.
You also need to give every element other fonts like:
.fab {
font-family: "Font Awesome 5 Brands";
}
.fa, .far, .fas {
font-family: "Font Awesome 5 Free";
}
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);
}
})();
Problem:
I'm attempting to use Abadi MT Condensed Extra Bold font. Unfortunately, I can't find any CDN's that provide this over an API. Is there something wrong with the css code that I'm using to pull in the fonts? I know for sure the stylesheet is being loaded.
Context
The font works when I have it turned on in my system's font book 100%, but not when disabled/removed -- but I understand that it's not practical to expect that every user is going to have that font. So given this, it does not work on an iPhone or Android device.
Am I better off finding a font in a CDN or, is it possible to make this work? Thanks!
Code:
****** fonts.css ********
#font-face {
font-family: 'serif';
src: url('../fonts/Abadi MT Condensed Extra Bold.eot');
src: local('☺'), url('../fonts/Abadi MT Condensed Extra Bold.woff') format('woff'), url('../fonts/Abadi MT Condensed Extra Bold.ttf') format('truetype'), url('../fonts/Abadi MT Condensed Extra Bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}
***** layout.pug *******
doctype html
html(lang='en')
head
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
meta(name='description', content='')
meta(name='author', content='')
title #{title}
//jquery
script(src='https://code.jquery.com/jquery-2.2.4.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js')
//shopify
script(src='http://sdks.shopifycdn.com/js-buy-sdk/v0/latest/shopify-buy.umd.polyfilled.min.js')
//custom cart
script(src="scripts/cart.js")
//popper
script(src='./vendor/popper/popper.min.js')
//bootstrap
script(src='./vendor/bootstrap/js/bootstrap.min.js')
//Favicons
link(rel='apple-touch-icon', sizes='57x57', href='/favicon/apple-icon-57x57.png')
......
......
// Bootstrap core CSS
link(href='vendor/bootstrap/css/bootstrap.min.css', rel='stylesheet')
//Gliphicons had to be pulled in separately
link(href='//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css', rel='stylesheet')
// Custom fonts for this template
link(href='./stylesheets/fonts.css', rel='stylesheet')
// Custom styles for this template
link(href='./stylesheets/template.css', rel='stylesheet')
Attempted Solutions
I've already attempted solutions like this. Also my CSS code used to not have the entire fonts.css file.
I was able to figure this out, posting for anyone else that has the same issue.
I found this blob to help
So now my final code is
#font-face {
font-family: AbadiBold;
src: url('../fonts/Abadi MT Condensed Extra Bold.ttf') format('truetype');
src:
url("../fonts/Abadi MT Condensed Extra Bold.woff") format("woff"),
url("../fonts/Abadi MT Condensed Extra Bold.otf") format("opentype"),
url("../fonts/Abadi MT Condensed Extra Bold.svg#filename") format("svg");
font-weight: 400;
font-style: normal;
}
* {
font-family: AbadiBold
}
h1, h2, h3, h4, h5, h6, .text-heading {
font-family: AbadiBold
}
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).
Looking at the source for the Microsoft Edge homepage, the page's stylesheet is loaded as:-
<link rel="stylesheet" type="text/css" href="https://c.s-microsoft.com/en-gb/CMSStyles/style.csx?k=eb892833-0e5a-b8c0-2921-57013ef132d9_f05cbaf8-1aa4-2e42-0beb-040a76f09433_e688a192-b2e5-4598-dec4-9340a1bb6723_6e5b2ac7-688a-4a18-9695-a31e8139fa0f_b3dad3e4-0853-1041-fa46-2e9d6598a584_fc29d27f-7342-9cf3-c2b5-a04f30605f03_a66bb9d1-7095-dfc6-5a12-849441da475c_1b0ca1a3-6da9-0dbf-9932-198c9f68caeb_ef11258b-15d1-8dab-81d5-8d18bc3234bc_11339d5d-cf04-22ad-4987-06a506090313_176b8afa-bab9-e793-c91f-d22b5a134b6e_8031d0e3-4981-8dbc-2504-bbd5121027b7_3f0c3b77-e132-00a5-3afc-9a2f141e9eae_aebeacd9-6349-54aa-9608-cb67eadc2d17_0cdb912f-7479-061d-e4f3-bea46f10a753_343d1ae8-c6c4-87d3-af9d-4720b6ea8f34_a905814f-2c84-2cd4-839e-5634cc0cc383_190a3885-bf35-9fab-6806-86ce81df76f6_9a16c79d-25f5-bdfe-5f2f-db073a7c44a9_e35b6b5f-66da-dedc-3f00-745165d9153a_469a8551-3011-f265-8b8f-5929dc69c497_788198f9-9eef-398f-9683-0cfdba85933d_bfafe587-a6ac-831e-ddf2-924fd9c72cdf_cab08b69-d2f0-1170-14b6-3c3a28953f9f" />
Digging further into the source for style.csx, the syntax of the file is scss like, for example:-
#mixin font-face($family, $set, $weight, $locals: (), $version: latest){
$local-fonts: '';
#if $supports-local == true {
#each $item in $locals {
$local-fonts: #{$local-fonts} + 'local("' + #{$item} + '"),';
}
}
#font-face {
font-family: 'wf_' + #{$family} + '_' + #{$weight};
src: url('//i.s-microsoft.com/fonts/#{$family}/#{$set}/#{$weight}/#{$version}.eot');
src: #{$local-fonts} +
url('//i.s-microsoft.com/fonts/#{$family}/#{$set}/#{$weight}/#{$version}.eot?#iefix') format('embedded-opentype'),
url('//i.s-microsoft.com/fonts/#{$family}/#{$set}/#{$weight}/#{$version}.woff') format('woff'),
url('//i.s-microsoft.com/fonts/#{$family}/#{$set}/#{$weight}/#{$version}.ttf') format('truetype'),
url('//i.s-microsoft.com/fonts/#{$family}/#{$set}/#{$weight}/#{$version}.svg#web') format('svg');
font-weight: normal;
font-style: normal;
}
}
Google didn't lead me to anything which seems to pertain to csx in this context - this isn't C# and doesn't seem to relate to a jquery plugin called csx which processes css files.
So, what exactly is a csx file in this context? Does it require javascript client side processing (the page renders fine in Chrome) and is there any benefit to csx used this way over, for example, pre-compiled scss?
In this case .CSX is almost certainly C# scripting. What you are seeing is the generated output of that script NOT the source of the file style.csx