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
Related
I need to includes the font-faces directly in the DOM, what I'm trying to say is I need to put the font-faces in a tag. I could did it, but now, the fonts looks different
PD: ONLY HAPPENS WITH OPEN SANS FONT
I tried to put different css properties, like font-smoothing
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering: optimizeLegibility;
Update: Well, I found the problem, but not the solution, it's a weird issue. By downloading the "OpenSans-Regular" you can notice it's not only regular, if you put the
font-weight: bold;
You will able to see a bold weight, but not really the original "OpenSans-Bold", if you download the "OpenSans-Bold" you can see a difference bewtween put
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
font-family: 'Open Sans'; // Actually this is the open sans regular
font-weight: bold;
Results:
AND
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
font-family: 'Open Sans'; // And this is the original open sans bold
font-weight: bold;
Results:
The second result is bolder than regular (obviously) with font weight 700
Does anyone know what this behavior is due to? I need to use the bold of the Regular and the original bold of "OpenSans-Bold" (both of them in the same website). Thanks in advance.
(Friendly reminder! I'm not using google fonts API, just for example purpose -but I downloaded manually OpenSans from it-)
I am using two webfonts in a page that I convert to a PDF using dompdf. I have this in the header:
<link href='http://fonts.googleapis.com/css?family=Signika:600|Roboto+Condensed' rel='stylesheet' type='text/css'>
I then use them in CSS rules like
body {
font-family: "Roboto Condensed", sans-serif;
[ ... ]
}
h1 {
font-family:'Signika', Arial, Helvetica, sans-serif;
[ ... ]
}
Now, when I generate the PDF, the h1 is displayed with the "Signika" font, but "Roboto Condensed" is replaced by Helvetica or some other standard sans-serif font.
If I open the "preview" file (i.e. the php page which I then include in the PDF generation script), "Roboto Condensed" is displayed as expected, but it doesn't make it into the PDF. But as I wrote, "Signika" is there in the PDF, and that's somehow odd to me. BTW, I also tried to include the font-face rule directly in CSS rules for p, div, li etc. but that wouldn't change anything.
Any suggestions how I could fix that?
EDIT/ADDITION:
Thinking about it, a difference between the two fonts is that Roboto Condensed has a space in its name. I wonder if that could cause the problem (i.e. dompdf not being able to handle such a font name)? But I can't change that as long as I am fetching the fonts from the Google server.
I found the solution myself:
As I had added to my question in an edit, the reason obviously was that the font-family name "Roboto Condensed" contains a space, which dompdf doesn't seem to like.
I downloaded the font, created three versions of it with the font generator on Fontsquirrel and put them on my server, together with this stylesheet:
#font-face {
font-family: 'roboto_condensedregular';
src: url('robotocondensed-regular-webfont.woff2') format('woff2'),
url('robotocondensed-regular-webfont.woff') format('woff'),
url('RobotoCondensed-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Then, in my CSS rules I used that new font name roboto_condensedregular in font-family: roboto_condensedregular, sans-serif;
Now it works, also in the PDF.
You don't need to actually do all of this. Simply use the #importoption to embed the font in your html. Works like a charm using laravel-dompdf.
screenshot
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
My website is not showing the appropriate font, PT Sans.ttc. I checked on other browsers and it works fine.
www.farmap-ux.com. Below is CSS code.
#font-face
{
font-family: PT Sans;
font-family: font-family: 'PT Sans', sans-serif;
src: url("http://fonts.googleapis.com/css?family=PT+Sans")
}
So it works on everything like I said (Chrome, Safari, even Opera!) Any ideas? I've tried to find .woff files for the font but I don't think it's in my Font Book.
Maybe it's because your #font-face declaration isn't valid at all. It should be something like:
#font-face
{
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v4/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
However, it's even better to use the CSS file provided by google:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans">
If you want to stick to a CSS import use
#import url(http://fonts.googleapis.com/css?family=PT+Sans);
You should really check your css! The syntaxe is miles away from correct.
Also, http://fonts.googleapis.com/css?family=PT+Sans is already a css file!
what you should do is import is put it directly into the <head> your html using the link tag.
Have a look at this example: http://www.w3schools.com/tags/tag_link.asp, or just add the following to your html file as said before.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans">
Following the directions at Google Webfonts should fix your problem.
First, make sure you're including the Google CSS necessary to reference the font files. You have the option to include a LINK tag in your HTML, a #import directive in your CSS, or some Javascript. I recommend the LINK tag for maximum browser compatibility:
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
When adding this CSS to your site, Google will automatically determine the correct font type to use for your browser. Not all browsers use WOFF files. Older versions of IE use EOT files, some browsers prefer SVG or TTF. Google is able to sniff for the browser type and modify the included CSS as necessary.
After Google's CSS is included, you only have to reference the font family in your CSS where you want the font to appear.
font-family: 'PT Sans', sans-serif;
That's the only CSS necessary. Remove all the other CSS you linked… as mentioned in the other answers your CSS has some errors.
Try:
#font-face {
font-family: 'PT Sans';
font-weight: normal;
src: url("http://fonts.googleapis.com/css?family=PT+Sans");
}
I have a really bad conflict with using google-webfonts.
OK here is the code:
This is in head:
<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
And this is in the css-file:
body {
font-family: 'Oswald', sans-serif;
font-weight: 700; }
"Oswald" is a font-family of 3 fonts:
book (300)
normal (400)
bold (700)
As you can see.. i've loaded only the bold-face (700). (you can see it in the query)
And it works till here BUT …
THE PROBLEM IS:
I have a desktop-version of the 3 fonts (300,400,700) installed on my computer and as long as these fonts are activated … the browser shows me the wrong font-weight (400) in my html-document.
OK. The problem is that in my css 'Oswald' takes the localfont and not the webfont. But the local font "Oswald" is "Oswald normal". I don't know why google is calling it 'Oswald' instead of 'Oswald Bold'. So I don't know how to fix this problem.
I don't want the css to point at the local-font .. i want it to show always the webfont … because of the right font-weight!
Do you have any ideas?
Please?
Possible to Rename the webfont-call?
You can edit the CSS #font-face rule to fit your needs instead of just loading the automatically-generated one from Google. Basically the issue is that their rule prefers local versions (src: local('Oswald Bold'), local('Oswald-Bold'), ...). The corrected verison would look like:
#font-face {
font-family: 'WebOswald';
font-style: normal;
font-weight: 700;
src: url(https://themes.googleusercontent.com/static/fonts/oswald/v5/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
Just add that to your CSS manually, and use font-family: 'WebOswald'; when you want to use Google's Web version of the font.
I hope that helped!