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;
}
I need to replace a existing font-face with Ariel Narrow. However the below code does not work.
#font-face {
font-family: site-generic-font;
src: local("Arial Narrow");
font-weight: 700;}
Ariel Narrow Is not being picked up on my Computer. The alternative below works so why won't the "local" code work?
font-family: Arial Narrow;
#font-face {
font-family: MyArialNarrow;
src: local("Arial Narrow");
}
div { font-size:30px; }
.c2 { font-family: myFirstFont2; font-weight: 700; }
.c3 { font-family: Arial Narrow; font-weight: 700; }
<div class="c2">I am Arial Narrow.</div>
<div class="c3">I am Arial Narrow.</div>
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.
I'm using the css #font-face function to define a custom font. The font is called 'Myriad Pro Bold', and as fallback I use Arial/Sans-Serif.
#font-face { font-family: MyriadProBold; src: url('fonts/myriadpro_bold.otf'); }
h3 { font-family: MyriadProBold, Arial, Sans-Serif; }
The font-weight: bold; element is only needed when Arial or another Sans-Serif font is shown. If I add font-weight: bold; to the tag and MyriadProBold loads, the bold font is becoming extra bold, which looks ugly.
So actually I'm looking for something like this
if h3 font is MyriadProBold
font-weight: normal;
else
font-weight: bold;
Help is appreciated, thanks!
Myriad Pro Bold is a bold typeface of the Myriad Pro family and should be declared that way:
#font-face {
font-family: "Myriad Pro";
src: url('fonts/myriadpro_bold.otf');
font-weight: bold;
}
Then you can simply let, say, h3 have their default boldness, or declare that explicitly if there is some “CSS reset” or other code that disturbs it:
h3 { font-weight: bold; }
Now you simply declare font family the natural way:
h3 { font-family: "Myriad Pro", Arial, sans-serif; }
Your fallback font do not match on weight with your custom font. However, there are bold variation of arial. You can try
h3 {
font-family:custom, 'Arial Bold', sans-serif;
}
Did you try to set the font-weight in #font-face?
#font-face {
font-family: "MyriadProBold";
src: url('fonts/myriadpro_bold.otf');
font-weight: normal;
}
h3 {
font-family: MyriadProBold, Arial, Sans-Serif;
font-weight: bold;
}
Not sure if it works but give it a try.