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
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'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 tried to copy the font of this website menu but when I put the style in my own WordPress CSS theme I still get the bold version of it. Is there a special trick so I can get the light version of the font?
Got the font the same way loaded in what they have.
If you are indeed looking for the font Montserrat and you want the light version, you can use this import reference:
#import url(http://allfont.net/allfont.css?fonts=montserrat-light);
And you can use it like this in css:
font-family: 'Montserrat Light', arial;
More information about this font can be found here: http://allfont.net/download/montserrat-light/
It looks like the Google font Montserrat:
http://www.google.com/fonts/specimen/Montserrat
It seems this font only comes in Normal (400) and Bold (700):
http://www.google.com/fonts#UsePlace:use/Collection:Montserrat
For the Normal version of the font, try adding:
font-weight: 400;
to your CSS. Also, make sure you're referencing the font correctly by importing it first:
#import url(http://fonts.googleapis.com/css?family=Montserrat);
then adding the style to the correct element:
font-family: 'Montserrat', sans-serif;
So, I pulled Arial over onto Linux from my former Windows distribution, but I then had to fight with the 12px Arial issue. I fixed that as suggested by resizing it to 13px, but I decided that I actually much preferred Google Calendar in Liberation Sans as I'd had it before.
I've used Stylish to fix that for the main part of the calendar, but I can't get the Google Tasks section to use Liberation Sans because it uses much more complex/strange CSS selectors.
Firebug says the font-family of the Tasks section is defined by div#:x.tl.U, with HTML
<div id=":x.fc" class="bb" style="height: 165px;">
<div id=":x.tl" class="U Rb">
<table class="v" cellspacing="0" cellpadding="0" style="width:100%">
(lots more nested tds/divs here)
</table></div></div>
but using
div#:x.tl.U {font-family: "Liberation Sans", Arial, sans-serif !important;}
or even
div#\3a x\.tl.U {font-family: "Liberation Sans", Arial, sans-serif !important;}
doesn't produce any results. For the main (month / 2 weeks view) section,
div.st-c-pos {font-family: "Liberation Sans", Arial, sans-serif !important; }
works fine (altering exactly the element Google uses to define the font-family).
How do I work with these selectors? I do know some CSS but that kind of complexity is beyond me. (Also if someone could explain what the different "., :" etc. parts mean...?)
Edit: It's not just the Tasks section, the week view also displays a mixture of Arial and Liberation Sans. I've defined the font-family for the body element as well, but that doesn't really seem to inherit... Any better ideas than just hunting down every single declaration of Arial in the page and replacing it manually?
Adding that HTML does help, though as you say, that ID name is pretty weird. However, your first shot at div#:x.tl.U looks right to me, as it chains the ID and class. So it's most likely that the inner elements also have a font-family declaration of Arial that is overriding your rule.
I suppose, as a test, you could try something like this, though it's a bit of a sledgehammer option that may not suit anyway:
body * {font-family: "Liberation Sans", Arial, sans-serif !important;}
Otherwise, have a look at the inner elements and see if any of them have explicit font declarations.
I have a rails project I am using bootstrap+compass on.
The default font family is:
"Helvetica Neue", Helvetica, Arial, sans-serif
However my fonts are displaying in Times.
If you look at this screenshot taken from the "computed style" section in Chrome you can see that yes, it sees that as my font-family but is rendering Times anyways. Which isn't even a san-serif font, so the only way I can possibly imagine in which this would be the case is if I had no sans-serif fonts in my computer at all. Which is not the case!
Any ideas what is going on?