I am trying to override the font of all headers, input, select, text area and input placeholders on my site with the following code:
h1, h2, h3, h4, h5, h6,
button, input, select, textarea,
:-ms-input-placeholder,
::-moz-placeholder,
:-moz-placeholder,
::-webkit-input-placeholder {
font-family:some font name;
}
The problem is, for some reason it isn't working on Chrome. If I delete the :-moz and :-ms references, then chrome works fine, which leads me to believe that Chrome doesn't like pseudo-classes for some reason? I'm stumped, because I can't see why pseudo-classes that have nothing to do with Chrome would make it not work!
You need to make separate declarations for it to work in all browsers, otherwise a conflict will cause undesired results like this.
h1, h2, h3, h4, h5, h6,
button, input, select, textarea {
font-family: somefont;
}
::-webkit-input-placeholder {
font-family: somefont;
}
:-moz-placeholder {
font-family: somefont;
}
::-moz-placeholder {
font-family: somefont;
}
:-ms-input-placeholder {
font-family: somefont;
}
Related
So I have a production project in laravel. The problem I'm facing is when I upload custom font to public directory (ttf, woff, woff2) and then in .css file specify #font family it does show up in CSS when I inspect element as font-family but font does not actually change.
#font-face {
src: url('/../fonts/custom-font.woff');
font-family: "custom-font" !important;
}
h1, h2, h3, h4, h5, h6 {
font-family: "custom-font" !important;
In my case I had several problems. First of all I had !important which was not needed, but most importantly, the font i was using was wrongly formatted.
#font-face {
src: url('/../fonts/custom-font.woff');
font-family: "custom-font";
}
h1, h2, h3, h4, h5, h6 {
font-family: "custom-font";
}
It should have been like this, and make sure you double check font you are using
I want all headings and everything in them, such as anchor tags, to be a certain font family. This works:
h1, h2, h3, h4, h5, h6, h1 > *, h2 > *, h3 > *, h4 > *, h5 > *, h6 > * {
font-family: serif;
}
I was wondering if this is the most efficient way to do it?
font-family is inherited, so it you're not overriding it elsewhere, you can simply do this which will work for the child elements too:
h1, h2, h3, h4, h5, h6 {font-family:serif;}
If you are overriding it elsewhere, then it depends how exactly you're overriding it to know what specificity you need here.
In the following Sass file i'm creating a simple css structure where I can set up all the fonts in the first rows.
$global-font-family: 'Open Sans', sans-serif;
/*h1*/
$h1-font-family: inherit;
$h1-font-size: 4em;
$h1-letter-spacing: inherit;
$h1-line-height: inherit;
$h1-text-transform: inherit;
/*h2*/
$h2-font-family: inherit;
$h2-font-size: 3em;
$h2-letter-spacing: inherit;
$h2-line-height: inherit;
$h2-text-transform: inherit;
h3,h4,h5,ecc.
h1, h2, h3, h4, h5, h6, p {
font-family: $global-font-family;
}
h1 {
font-family: $h1-font-family;
font-size: $h1-font-size;
letter-spacing: $h1-letter-spacing;
line-height: $h1-line-height;
text-transform: $h1-text-transform;
}
h2 {
font-family: $h2-font-family;
font-size: $h2-font-size;
letter-spacing: $h2-letter-spacing;
line-height: $h2-line-height;
text-transform: $h2-text-transform;
}
h3,h4,h5 ecc.
Firstly a font-family is applied to h1,h2,h3,p. Then, you can change every single tag, but is not necessary. For example, if you set a global font-family Open Sans to all, and h1 has to be Open Sans, you leave h1 blank.
But... how I leave h1 to Open Sans without removing this
h1 { font-family: $h1-font-family }
is "inherit" the correct way? What would be the cleanest solution?
Thanks
Generally if you are creating a template, I think it would be better to write just the global rules and let the users customize whatever they need in whichever model they prefer to do it. What I mean to say is that you should leave out all the h1, h2 specific rules and let them write the selectors if they need. They can always override your CSS by appending custom rules.
But if you want to follow your model of defining the variable names that they should be using, setting the properties only if the expected variable is defined by the user then the #if directive or the if() function along with variable-exists, global-variable-exists could be useful for you like in below snippet (its a reduced sample). I think this makes it really complex but its your choice.
$global-font-family: 'Open Sans', sans-serif;
$global-font-size: 3em;
/*h1*/
$h1-font-family: 'Roboto Sans', sans-serif;
/*h2*/
$h2-font-size: 1em;
h1, h2, h3, h4, h5, h6, p {
font-family: $global-font-family;
}
h1 {
#if (global-variable-exists(h1-font-family) or variable-exists(h1-font-family)){
font-family: $h1-font-family;
}
font-size: if((global-variable-exists(h1-font-size) or variable-exists(h1-font-size)),
$h1-font-size,
$global-font-size);
}
h2 {
#if (global-variable-exists(h2-font-family) or variable-exists(h2-font-family)){
font-family: $h2-font-family;
}
font-size: if((global-variable-exists(h2-font-size) or variable-exists(h2-font-size)),
$h2-font-size,
$global-font-size);
}
variable-exists function checks if the variable is defined in the local scope whereas the global-variable-exists checks if it is defined in global scope. If it is defined then we use the value provided by the user. If else we do nothing or use the global font settings.
In the snippet, I've also demonstrated both the #if directive and the if function. They have subtle differences. The #if directive prints the property (font-family here) only if the variable exists while in the case of if function, as you can see, the property is printed irrespective of whether the variable exists or not. If the variable is present, it uses th user defined value else it uses the global setting. The choice on which one to use is upto you.
Below is the compiled CSS:
h1, h2, h3, h4, h5, h6, p {
font-family: "Open Sans", sans-serif;
}
h1 {
font-family: "Roboto Sans", sans-serif;
font-size: 3em;
}
h2 {
font-size: 1em;
}
Here since the $h2-font-family is not defined separately, it doesn't print the font-family here and so the global one defined in h1, h2, h3, h4, h5, h6, p would get used.
Note: inherit doesn't mean inherit the value from the previous matching selector. It means inherit the value from the parent. So, for example if you need body to have Arial font, global setting is for h1, h2, h3 to have Verdana then if you set $h1-font-family to inherit, it would apply Arial font to h2 instead of applying Verdana (if user didn't define anything). This might not be what you're after.
body {
font-family: Arial;
}
h1, h2, h3 {
font-family: Verdana;
}
h2 {
font-family: inherit;
}
<h1>Some Heading 1</h1>
<h2>Some Heading 2</h2>
<h3>Some Heading 3</h3>
The reason you make variables in the first place is to make changes quicker and be able to be consistent. If you want to apply your h1 font to all headings or to primary headings name the variable after that. Or simply inherit. ex:
$font-heading-primary: 'Open Sans', sans-serif;
$font-heading-secondary: 'Halfway Sans', sans-serif;
$font-family-paragraph: 'Closed Sans', sans-serif;
$font-size-lg: 3rem;
$font-size-md: 2rem;
$font-size-sm: 1rem;
h1 {
font-family: $font-heading-primary;
font-size: $font-size-lg;
}
h2 {
font-family: $font-heading-primary;
font-size: $font-size-md;
}
h3 {
font-family: $font-heading-secondary;
font-size: $font-size-sm;
}
p {
font-family: $font-paragraph;
}
There a lot of ways to about architecting your SCSS, but it's easy to get in a situation of overkill like your example. I would try to harness the power of the cascade if I were you; set the font family on the body or a base set of elements so you're not redeclaring it hundreds of times.
body,
button,
input,
select,
textarea,
address,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $global-font-family;
}
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.
I am trying to override the font of all headers, input, select, text area and input placeholders on my site with the following code:
h1, h2, h3, h4, h5, h6,
button, input, select, textarea,
:-ms-input-placeholder,
::-moz-placeholder,
:-moz-placeholder,
::-webkit-input-placeholder {
font-family:some font name;
}
The problem is, for some reason it isn't working on Chrome. If I delete the :-moz and :-ms references, then chrome works fine, which leads me to believe that Chrome doesn't like pseudo-classes for some reason? I'm stumped, because I can't see why pseudo-classes that have nothing to do with Chrome would make it not work!
You need to make separate declarations for it to work in all browsers, otherwise a conflict will cause undesired results like this.
h1, h2, h3, h4, h5, h6,
button, input, select, textarea {
font-family: somefont;
}
::-webkit-input-placeholder {
font-family: somefont;
}
:-moz-placeholder {
font-family: somefont;
}
::-moz-placeholder {
font-family: somefont;
}
:-ms-input-placeholder {
font-family: somefont;
}