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.
Related
Disclaimer: I'm a noob so please don't use too many hard terms when answering lol
I have a couple of cute fonts I downloaded from dafont and am hoping to use in my coding project from school. I'm calling it a local project because it will not be uploaded online, we'll just be sending the markers a zip file of the work we've done. I was wondering if the markers will actually be able to view the fonts that I'm wanting to use?
Would I be safer using google fonts? But I tried downloading one and it wouldn't show up when I wrote it like:
p {
font-family: Nunito;
}
I am using Visual Studio Code and it didn't do the typical autocomplete, and saving it and running it didn't make it work.
Here's the entire code:
body {
background-color: white;
}
h1 {
color: #b98b82;
font-family: Seritta, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
p {
font-family:Arial, Helvetica, sans-serif
}
If you have downloaded your fonts, you can just add your font files to your project. I recommend adding them to a folder (maybe call it "fonts").
After you added them, just add a #font-face to your css.
#font-face {
font-family: 'YourFont';
src: url('fonts/yourfont.woff2') format('woff2');
}
To use it now, you just have to specify the font-family, for example:
body{
font-family: 'YourFont';
}
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.
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've got Semantic UI working just fine with my Meteor app (both latest versions), using SUI default theme. I only want to change the font from Lato to Roboto - just that and nothing else.
I've tried adding #fontName: "Roboto" to /site/globals/site.variables.import.less - still, everything comes up Lato.
The documentation is not very clear (to me at least!) so I further tried adding #fontName: "Roboto" to every single file that didn't start with DO NOT MODIFY - still, Lato everywhere.
Also tried adding body {font-family: "roboto"} in the SUI variables and main.css - still Lato.
I don't know what else I can try - SUI is so nice to use I thought something simple like changing font would be no trouble. Any ideas?
SUI does indeed download Google Fonts for you. But you have to let SUI know which fonts you want in a particular manner.
This is an example from here.
#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';
You might just need to include the Google font you want in the #googleFontFamily variable along with the proper styles and weights
P.S. You'll have to add this in your src/site/globals/site.variables
I can't see what is the point of doing this? For me it renders identically the same, so why should I use Arial, Helvetica, sans-serif vs just sans-serif?
The default font the user is seeing depends on the browser and its configuration. If you don't care what font the user is seeing—except that it is a sans-serif font, regardless of their system default—then by all means just use font-family: sans-serif;.
However, you can't depend on the defaults being specific fonts (e.g., Helvetica, Arial), as users can change them in their preferences. For a more uniform experience and design, it is a better practice to explicitly specify your font preferences, in order of priority.
In this case, it will default to using Arial, then fall back to Helvetica if Arial isn't installed, and then, finally, fall back to the system sans-serif default if Helvetica can't be found.
You should use "Arial, Helvetica, sans-serif " because if 'Arial' isn't available the font will be changed to 'Helvetica' which is the same as 'Arial' and so on.