I'm using postcss-autoreset which applies all: initial; to any element I style in my CSS files.
But, when I try to set the font of the body element only elements that I haven't styled in CSS will get the font. Elements I have styled revert to the browser's default. Which is very odd.
all: initial; seems to be overriding font-face because when I view in Chrome inspector it's showing as overridden.
As an example below all my elements on the page are displaying with the Roboto font, except for text within header which is using the browsers default.
app.css
#import "variables.css";
#import "header.css";
#import "footer.css";
body {
font-family: 'Roboto';
margin: 0 auto;
display: block;
}
header.css
header {
padding: 10px 0;
}
config.js (PostCSS CLI config.js file)
{
"use": [
"postcss-import",
"postcss-cssnext",
"lost",
"rucksack-css",
"postcss-autoreset",
"postcss-font-magician"
],
"input": "src/app.css",
"output": "css/main.css",
"local-plugins": true,
"autoprefixer": {
"browsers": "last 2 versions"
}
}
Here is the output being produced by postcss:
#font-face {
font-family: Roboto;
font-style: italic;
font-weight: 100;
src: local("Roboto Thin Italic"),local(Roboto-ThinItalic),url(//fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-YVQlYEbsez9cZjKsNMjLOwM.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-Yfk_vArhqVIZ0nv9q090hN8.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-YRsxEYwM7FgeyaSgU71cLG0.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: italic;
font-weight: 300;
src: local("Roboto Light Italic"),local(Roboto-LightItalic),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at2fQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at44P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at4bN6UDyHWBl620a-IRfuBk.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: italic;
font-weight: 400;
src: local("Roboto Italic"),local(Roboto-Italic),url(//fonts.gstatic.com/s/roboto/v15/OiNnAEwKzzJkQCr4qZmeq_esZW2xOQ-xsNqO47m55DA.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: italic;
font-weight: 500;
src: local("Roboto Medium Italic"),local(Roboto-MediumItalic),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0WfQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0Y4P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0YbN6UDyHWBl620a-IRfuBk.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: italic;
font-weight: 700;
src: local("Roboto Bold Italic"),local(Roboto-BoldItalic),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC2fQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC44P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC4bN6UDyHWBl620a-IRfuBk.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: italic;
font-weight: 900;
src: local("Roboto Black Italic"),local(Roboto-BlackItalic),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpWfQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpY4P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpYbN6UDyHWBl620a-IRfuBk.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: normal;
font-weight: 100;
src: local("Roboto Thin"),local(Roboto-Thin),url(//fonts.gstatic.com/s/roboto/v15/PP2U5prMl9yvKSWVu6DtvPesZW2xOQ-xsNqO47m55DA.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/2tsd397wLxj96qwHyNIkxPesZW2xOQ-xsNqO47m55DA.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/vzIUHo9z-oJ4WgkpPOtg1_esZW2xOQ-xsNqO47m55DA.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: normal;
font-weight: 300;
src: local("Roboto Light"),local(Roboto-Light),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUffY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: normal;
font-weight: 400;
src: local(Roboto),local(Roboto-Regular),url(//fonts.gstatic.com/s/roboto/v15/5YB-ifwqHP20Yn46l_BDhA.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: normal;
font-weight: 500;
src: local("Roboto Medium"),local(Roboto-Medium),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUfY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: normal;
font-weight: 700;
src: local("Roboto Bold"),local(Roboto-Bold),url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOPY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: normal;
font-weight: 900;
src: local("Roboto Black"),local(Roboto-Black),url(//fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIvY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIltXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}
header,
header .brand,
header nav,
header nav li,
header nav a,
header nav,
header nav ul,
header nav li,
body,
body {
all: initial
}
header {
background: #00AFEC;
display: block
}
header .brand {
width: 100%
}
header nav li {
display: block;
text-align: center
}
header nav a {
color: #FFF;
text-decoration: none;
font-size: 18px
}
#media (min-width: 361px) {
header nav {
width: 100%
}
header nav ul {
float: right
}
header nav li {
padding: 0 30px
}
}
body {
font-family: 'Roboto';
margin: 0 auto;
display: block;
}
Any idea why this is happening?
postcss-autoreset accepts reset option. By default it is just all: initial, which resets font. But I recommend to set reset in all: initial; font-family: inherit; font-size: inherit.
So in postcss-autoreset you should explicit show what properties you really want to inherit. And you could set some inherit properties by default in reset option.
Normally the font-family is inherited by the parent element. So you may use a simple
html {
font-family: Roboto;
}
to make the whole page use the Roboto font, even though there is no font-family explicitly defined for your elements - they simply inherit the value from their parent which is html (or in your example body).
If you are using postcss-autoreset, all elements styled by you, will get the all: initial; property, which resets the font-family. Therefore these elements will NOT have the Roboto font-family.
Btw, I wouldn't recommend you to use postcss-autoreset. I simply don't see the point in using it, as it doesn't do much (only add 1 prop/value) and it kinda breaks the css inheritance concept with it. In my opinion people should use postcss primarily to balance browser-inconsistencies. Plugins like autoprefixer and postcss-fixes (yeah, some self-promotion here) do a great job. If you want to replace your preprocessor sass/less/stylus, some other plugins like precss might make sense, but this whole concept of adding many micro-plugins, leading to unexpected behavior and output, is IMHO too unstable and causes more problems than it solves.
Related
Trying to understand why SASS is compiling wrong in CSS:
in _typography.scss I have:
#mixin fontType ($type) {
#if $type=="normal" {
#font-face {
font-family: "gotham";
font-weight: normal;
font-style: normal;
src: url("./assets/fonts/HomepageBaukasten-Book1/BOOK/WEB/HomepageBaukasten-Book.woff2");
}
} #else {
#font-face {
font-family: "gotham";
font-weight: bold;
font-style: normal;
src: url("./assets/fonts/HomepageBaukasten-Bold11/BOLD/WEB/HomepageBaukasten-Bold.woff2");
}
}
}
in main.scss:
#import "./abstracts/typography";
body {
#include fontType("normal");
background-color: $background-color;
line-height: 1.6;
}
and gets compiled in main.css file like so:
body {
background-color: #17141f;
line-height: 1.6;
}
#font-face {
body {
font-family: "gotham";
font-weight: normal;
font-style: normal;
src: url("/HomepageBaukasten-Book.1c60130f.woff2");
}
}
Any idea where the problem is? Am I going wrong somewhere?
TY
Like I said in the comments, the mixin works but you're using it inside a selector breaks it. Also just adding a font declaration to a class does not give that class the font. You have to use font-family to reference the font declaration.
Use it like this:
#import "./abstracts/typography";
#include fontType("normal");
body {
background-color: $background-color;
line-height: 1.6;
font-family: gotham;
font-weight: normal;
}
Overall there is not need to create a mixin for font declarations as the browser will not download fonts that have been declared until they are actually used. So you can happily do the below and it should all just work without loading too many fonts:
#font-face {
font-family: "gotham";
font-weight: normal;
font-style: normal;
src: url("./assets/fonts/HomepageBaukasten-Book1/BOOK/WEB/HomepageBaukasten-Book.woff2");
}
#font-face {
font-family: "gotham";
font-weight: bold;
font-style: normal;
src: url("./assets/fonts/HomepageBaukasten-Bold11/BOLD/WEB/HomepageBaukasten-Bold.woff2");
}
body {
background-color: $background-color;
line-height: 1.6;
font-family: gotham;
font-weight: normal; // this will use the "HomepageBaukasten-Book.woff2"
}
.some_other_selector {
font-family: gotham;
font-weight: bold; // this will use the "HomepageBaukasten-Bold.woff2"
}
I am trying to set "not included" font to OnePress template. I tried plugins and etc. but it doesn't work. Same with CSS. For example, I used this:
#import url("https://use.typekit.net/zni3ajm.css");
body, body p {
font-family: century-gothic, sans-serif;
font-weight: 400;
font-style: normal;
}
#page .site-branding .site-title, #page .site-branding .site-text-logo {
font-family: century-gothic, sans-serif;
font-weight: 400;
font-style: normal;
}
#page .site-branding .site-description {
font-family: century-gothic, sans-serif;
font-weight: 400;
font-style: normal;
}
.onepress-menu a {
font-family: century-gothic, sans-serif;
font-weight: 400;
font-style: normal;
}
.hero__content .hero-large-text, .hero__content .hcl2-content h1, .hero__content .hcl2-content h2, .hero__content .hcl2-content h3 {
font-family: century-gothic, sans-serif;
font-weight: 400;
font-style: normal;
}
body h1, body h2, body h3, body h4, body h5, body h6,
.entry-header .entry-title,
body .section-title-area .section-title, body .section-title-area .section-subtitle, body .hero-content-style1 h2 {
font-family: century-gothic, sans-serif;
font-weight: 400;
font-style: normal;
}
But it changes only the navbar text, nothing else.
Weirdest part is: https://ctrlv.cz/VnU7
It works if I put in that CSS edit. But then I click publish, and on the original page is only navbar updated. Can someone help me?
Btw, I am importing from adobe creative cloud.
EDIT: I tried a different font and it works! How is it possible? Can I fix it somehow?
Use #font-face and import the font directly on your style file
For example
#font-face {
font-family:"century-gothic";
src:url("https://use.typekit.net/af/afc5c6/00000000000000003b9b1f23/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/afc5c6/00000000000000003b9b1f23/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/afc5c6/00000000000000003b9b1f23/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;
}
Then use it on you code:
body, body p {
font-family: century-gothic;
}
My file structure
diary:
diary.html
css
diary.css
sources
fonts
EmblemaOne-Regular.woff
My css code is:
#font-face {
font-family: 'EmblemaOne-Regular';
src: url('../sources/fonts/EmblemaOne-Regular.woff') format('woff');
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
h1, h2 {
color: #cc6600;
text-decoration: underline;
}
h1 {
font-family: 'EmblemaOne-Regular', sans-serif;
font-size: 220%;
}
h2 {
font-size: 130%;
font-weight: normal;
}
blockquote {
font-style: italic;
}
The problem is, that this font didnt apply to my h1 title? Can someone explain, why?
Btw I tried to remove quotes, use double quotes, remove "format", use full internet path. Thank you in advance.
I have downloaded some icons from icomoom but the icon background colours are black and white.I want to give my own colour.Can any body please tell me how to do?
When I downloaded the icon ,I got the following style.css
#font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?-haa506');
src:url('fonts/icomoon.eot?#iefix-haa506') format('embedded-opentype'),
url('fonts/icomoon.woff?-haa506') format('woff'),
url('fonts/icomoon.ttf?-haa506') format('truetype'),
url('fonts/icomoon.svg?-haa506#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-home:before {
content: "\e600";
}
.icon-images:before {
content: "\e601";
}
.icon-pawn:before {
content: "\e602";
}
The icons should be treated as text.
If you apply a color to them. they will change their color.
Example:
.icon-pawn { color: red; }
I had to use the ::after pseudo element.
.icon-pawn::after { color: red; }
I'm not sure if this is peculiar to my project though, as I'm working on small changes to someone else's code.
This works for me:
.icon-color-success:before {
color: #28a745 !important;
}
and then:
<i class="icon-python icon-color-success"></i>
From the start I need to say that I know what I'm trying to do is not "the right way to do it", but the client I'm working for desperately wants THIS specific font.
So, I need to use on a client's website the exact font as VOGUE uses. So I took the .eot & .ttf and uploaded them on my server. Then I added the CSS definitions:
/*fonts fonts for IE*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
/*fonts for other browsers*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
And the CSS for my element is:
.post h1 {
display: block;
height: 100%;
font-family: VogueDidot;
font-size: 55px;
text-transform: uppercase;
overflow: hidden;
line-height: 58px;
}
And, normally, I expected to see everything working like a charm.
But it's not...
Here's how it should look like:
And that's how it looks on my website :
Any ideas?
Looks like the browser is trying to display the font bold and repeating the gray pixels (from the thin lines) next to each other. Try using font-weight: normal (The font-weight:bold is inherited from the h1 element).