I have my set of variables defined in a file which i important in my my main.scss that looks like the below
$font-primary: Arial, Helvetica, sans-serif;
Is it possible to use lang to change to override $font-primary depending on the language in the html of the page?
I've tried to use
:lang(ja){
$font-primary: Helvetica, sans-serif;
}
and that hasn't seemed to work.
Related
I am trying to set Google Fonts in my React project but I am not being able to override the original font families of React.
Following some tutorials I inserted the font-family I want into index.css:
body {
/* margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Lemonada'
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; */
font-family: 'Lemonada',
cursive;
}
I commented the original fonts for testing purposes.
However the original fonts are not being overwritten:
If I inspect the file I see this:
As you can see all the commented fonts are still there, besides there are a lot of other things that doesn't exist in index.css. Apparently it is coming from some style.css file, but I have no idea where to find this.
If I uncheck this style I get the font-family I want:
And of course, I also added the api to my index.html file.
<link href="https://fonts.googleapis.com/css2?family=Lemonada:wght#300&display=swap" rel="stylesheet">
I'd like to be able to add new font-families or at least override the original ones.
What am I doing wrong?
Make sure <link href="https://fonts.googleapis.com/css2?family=Lemonada:wght#300&display=swap" rel="stylesheet"> is loaded before the of your css file.
Also try changing the line to
font-family: 'Lemonada' !important,
I kept digging and I found two possible solutions:
1- Instead of using the index.css, I put the font-family direct inside the css file corresponding to the component I want to use the font, in this case this is the file Layout.css.
2- I found out this library and it also works and seems to be very great: https://www.npmjs.com/package/react-google-font-loader
I have a Sitecore page with multiple languages. Is there a way to have different font-families for different languages? The language information is set in cookie.
Instead of using the cookie it is simpler to set the language in the HTML and use that in you CSS.
Example in Sitecore set in your Layout something like:
<html lang="#Sitecore.Context.Language.CultureInfo.TwoLetterISOLanguageName">
In CSS you can no use something like:
p:lang(en) {
font-family: "Times New Roman", Times, serif;
}
p:lang(ja) {
font-family: Arial, Helvetica, sans-serif;
}
I'm trying to get something like this to work:
body {
font-family: Verdana, Arial, sans-serif;
}
p {
font-family: Helvetica, inherit;
}
Basically if "Helvetica" is not available on the client's browser, I want the font-family to be inherited from a parent. But it seems to me that I can't use "inherit" in a font priority list.
How can I achieve something like this without having to copy paste font-family from body?
You are correct. You can use it just like you did. This is something that became available with CSS2. This question is similar and has some answers worthy of a read.
I think the real problem is that Helvetica isn't a free font. So, it just isn't available for widespread use.
Option 1) If you own the Helvetica font, make an image using that font
(for the few lines that you want that specific look for).
Option 2) (as #bjupreti suggested) is to use a substitute font that is widely
available.
Font family will automatically be inherited from the parent property. So, all you have to do is:
body {
font-family: Verdana, Arial, sans-serif;
}
p {
font-family: Helvetica;
}
This will automatically inherit the font family of body if there is no Helvetica in end users computer.
I'm trying to change the default 'Lato' font in Semantic UI but I haven't succeded.
I tried defining the new font in site.variables (/src/site/globals)
#headerFont : 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
#pageFont : 'Oswald', 'Helvetica Neue', Arial, Helvetica, sans-serif;
#googleFontFamily : 'Open+Sans:400italic,400|Oswald:400,700';
I also tried in site/components/site.css, in site.overrides file and finally on src/themes/default/globals/site.variables. No luck in any of those locations and I don't understand the documentation example. Maybe I installed Semantic in the wrong way.
Where am I suppose to define the new font? thanks
Did you rebuild the package after making the changes?
gulp build
You could also duplicate the default theme, rename it and make your edits in there to keep things a little cleaner IMO. If you go this route though, you'll need to make sure you update your theme.config file to reflect the theme you want the compiler to build when you run the command above.
I have a lengthy CSS file (over 1K lines prepared by 3rd party)
e.g.
p {font-family: Arial;}
I want to have a build process that change all "font-family" under the p tag to
p {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif}
Definitely I can modify the existing CSS file, but as it is lengthly and prepared by others (might update by them in the future, maintenance nightmare..), I am looking for some external build process that allow me to rewrite the CSS and produce a final CSS.
Is it possible with Less or SASS or other tools?
Sass and LESS are built exactly for this purpose. But you will need to rewrite your static CSS first into a dynamic style sheet, and then it would be good if the "3rd party" also would work on the dynamic stylesheet and not on the static CSS.
If this is not possible, you will have to
find/replace stuff every time you get the new file from them, or
have your additional CSS that you call after theirs that overrides their properties (e.g. sets the font-family for all p tags to your value)
So, how does the dynamic styling work: you have some variables that you define in the beginning, that get then used throughout the file, and if you want to change something, you change a variable and the whole file gets updated. But you can also use way more fancy stuff, like mixins and guards, you can read more on it at the links I pasted at the bottom of my answer. You can prevent a lot of rewriting this way.
So, this would make sense if you plan to reuse/change the file in the future.
For a very basic illustrative example - how you could use a simple variable in LESS:
#pFontFam: "Helvetica Neue", Helvetica, Arial, sans-serif;
p {
font-family: #pFontFam;
}
and the output CSS looks like this:
p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
But you can also define a mixin, that adds the whole property and its value to a class when you call it. There are a lot of resources online that describe how to install and use this. You could start here:
Sass
LESS
As for LESS, I'd use a parametric mixin (without parameter):
You can also use parametric mixins which don’t take parameters. This
is useful if you want to hide the ruleset from the CSS output, but
want to include its properties in other rulesets:
.wrap () {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre { .wrap }
Which would output this CSS:
pre {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
The reason is the value you're trying to repeat at different places (or modify in one centralized place) is a string of font names that will always be used with the same CSS property: font-family. You really don't need to repeat this property over and over. It isn't some numerical value that could be used both in margins and paddings and borders...
So it'd be like:
.fontBase () {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
p {
.fontBase;
}