I am using a pretty standard print stylesheet for my webpage, and it works perfect in all browsers except for Google Chrome. Whenever I print the page in Chrome it both previews it and prints it using my tablet stylesheet. When printed from another browser it prints using the standard stylesheet.
All of my other webpages print fine in chrome, but this one webpage is giving me trouble. Any ideas as to what the problem could be?
The following is my print.css file.
body {line-height:1.5;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;color:#000;background:none;font-size:10pt;/*margin: 25mm 25mm 25mm 25mm;*/}
#page-wrapper.container {background:none;
min-width:960px;
max-width:960px;
width:100%}
hr {background:#ccc;color:#ccc;width:100%;height:2px;margin:2em 0;padding:0;border:none;}
hr.space {background:#fff;color:#fff;visibility:hidden;}
h1, h2, h3, h4, h5, h6 {font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif;}
code {font:.9em "Courier New", Monaco, Courier, monospace;}
a img {border:none;}
p img.top {margin-top:0;}
blockquote {margin:1.5em;padding:1em;font-style:italic;font-size:.9em;}
.small {font-size:.9em;}
.large {font-size:1.1em;}
.quiet {color:#999;}
.hide {display:none;}
a:link, a:visited {background:transparent;font-weight:700;text-decoration:underline;}
Can you please include the code snippet of where the CSS gets included into the page? if media="print" is set on the link tag for our tablet stylesheet, then that's what the printer will use. Without some code, it's hard to diagnose.
Related
I've been struggling to create my 1st website in years. Using bootstrap in Dreamweaver.
There is a steep learning curve, made worse because it seems like bootstrap just wants to do what it wants to do.
I want to set up my styles, H1, H2, etc...
So, I added the H1 style like so:
h1 {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black",
"sans-serif";
font-size: 8em;
text-align: left
}
And at first it looks like it works, but as soon as I move to do something else, or check in on my test page, it does back to whatever size it defaulted to.
Preceding it is this:
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica
Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe
UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #0A0A0A;
text-align: left;
background-color: #fff;
}
I have piece by piece removed each of this attributes to see what my be over-riding my H1 code, but it makes no difference.
What am I missing?
Experimenting with the rest of the standard styles, h2 through h6 have the same problem. I think P is retaining size but it won't get lighter.
Mind you, the font family assigned to H1 stays. Whatever 4em, 8em, 30em, 100%, 300%, 600%.... That change will not present itself on a refresh of my test page and it will disappear from the Dreamweaver split view.
Thanks in advance.
Update: for #Isherwood
It only displays correctly within the Dreamweaver split screen interface as I change the CSS external sheet.
All this is new to me. It has been more than 8 years since I've built a site from scratch and I've only been member here for a few days.
I am quite the novice. I'm not even sure what you mean by "override styles".
I simply set h1, h2, h3, etc... in the HTML body portion around the text I want effected. I declare the font family, size, etc... in the external css as shown above.
But give me a while to see if I can figure out how to make a snippet as you requested.
Meanwhile, I do have this loaded online to see if that made any difference, in a folder on my husband's site.
https://www.walterbeckham.com/testingzone/one.html
I'm trying to change the font-family of the code block in Confluence by adding this Space Tools -> Look and Feel -> Stylesheet:
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto:700|Roboto+Mono&display=swap');
.code { font-family: "Roboto Mono", monospace; }
If I inspect the computed CSS in the browser, it shows that it's using "Roboto Mono" for the font-family. However, visually, I know that it's not Roboto Mono but the default monospace font of the browser.
I added this and it worked:
pre, code, .code, .code .container, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter a { font-family: "Roboto Mono", monospace; }
I'm going mad as I had my website working with custom web fonts and now suddenly it just stopped working.
I got the web font kit from Font Squirrel and I'm using my local WP site to test it.
I pasted the font kit at wp-content/themes/twentyfifteen/fonts/
Here is the content from my style.css from the theme folder
#font-face {
font-family: 'quicksandregular';
src: url('/fonts/quicksand-regular-webfont.woff2') format('woff2'),
url('/fonts/quicksand-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h {
font-family: 'quicksandregular' !important;
}
And nothing happens in the web page. I can't see my custom font, which is Bebas Neue.
Any help will be much appreciated.
Regards.
Did you mean to paste the font family of "quicksand"? Regardless, this should be a good template to import new fontfaces.
#font-face {
font-family: 'quicksandregular';
src: url('/htdocs/www/wp-content/themes/twentyfifteen/fonts/quicksand-regular-webfont.woff2') format('woff2'),
url('/htdocs/www/wp-content/themes/twentyfifteen/fonts/quicksand-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Then when you call your font, it will need to be done in a valid selector with a valid name, ie:
/* Style all Headlines */
h1, h2, h3, h4, h5, h6{
font-family: "quicksandregular";
}
You should also be using a fall back font stack like so:
/* Style all Headlines */
h1, h2, h3, h4, h5, h6{
font-family: "quicksandregular", Arial, Helvetica, sans-serif;
}
I am using various versions of Halvetic on this website. For some reason they all display fine, except for one which is fuzzy. I have noticed that one some browsers it is better or worse - however, on my iPhone it is really crisp and perfect?
Are there any suggestions on how I can get this font to display correctly in modern browsers on a desktop (chrome/firefox etc)?
This is what I see:
URL: http://52.64.135.79/wordpress/company-overview/
Relevant CSS rules I can see are as follows. Is there something I can do to fix this?
h4, .h4 {
line-height: 21px;
}
h4, .h4 {
font-size: 16px;
}
h4, .h4 {
font-weight: 700;
}
h4, .h4 {
font-family: "Helvetica Neue LT W01_55 Roman", sans-serif !important;
margin-bottom: 5px;
padding: 5px 0 0;
letter-spacing: 0.00em;
}
body {
-webkit-font-smoothing: antialiased;
}
Ultimately the issue here was because the font itself has a separate character set for each different font weight.
The CSS was applying a font-weight of 700 to a font which was meant to be rendered at 400. The fix was to download the heavier weight version of the font, rather than allow the browser to create an artificial "bold" version.
I'm really new to CSS and Ghost Blog Platform. I try to follow this instruction on how to customize the font of basic Casper theme.
However, the following line in the instruction seem not to work. With this line, icons disappear, and the font of texts behind icons also doesn't change.
[class^="icon-"]:before, [class*=" icon-"]:before
By the way, I try to change my font to Work Sans. Here is my full code.
<link href='https://fonts.googleapis.com/css?family=Work+Sans:400,700,500,600' rel='stylesheet' type='text/css'>
<style>
body,
h1, h2, h3, h4, h5, h6,
.main-nav a,
.subscribe-button,
.page-title,
.page-description,
.post-meta,
.read-next-story .post:before,
.pagination,
.site-footer,
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family:"Work Sans", sans-serif; /* Replace with your own font */
}
</style>
Any suggestion is very appreciated!
I had the same problem and I found out what the problem was.
In ghost academy, it is said that we can change fonts with the code below.
body,
h1, h2, h3, h4, h5, h6,
.main-nav a,
.subscribe-button,
.page-title,
.post-meta,
.read-next-story .post:before,
.pagination,
.site-footer,
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family:"Georgia", sans-serif; /* Replace with your own font */
}
But with that code, icons disappear as you said. To change the font without making icons disappeared, we can use codes like this.
<style>
body,
h1, h2, h3, h4, h5, h6,
.main-nav a,
.subscribe-button,
.page-title,
.post-meta,
.read-next-story .post:before,
.pagination,
.site-footer {
font-family:"Georgia", sans-serif; /* Replace with your own font */
}
</style>
<style>
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "casper-icons", "Open Sans", sans-serif;
}
</style>
Hope you solve the problem.