I have installed a Wordpress plugin, called IgniteUp and I want to emphasize some words by using a heavy weight (900). But no matter what I try, the thickest font weight I get is Bold (this works when I use <strong>). I tried using <bolder>, <thicker> and others but it's not working.
I'm using the font Lato. Thanks!
font-weight: 900 will only work by first referencing the font with that weight - from Google Fonts this would be something like:
<link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
Then you can write a CSS style like:
strong {
font-family: 'Lato', sans-serif;
font-weight: 900;
}
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 Google fonts in a few of my pages and hit a wall when trying to use variations of a font. Example: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans
I am importing three faces, Normal, Bold, ExtraBold via the link tag. The normal face displays correctly, but I cannot figure out how to use the variants of the font in my CSS
I tried all of the following as attributes for font-family but no dice:
'Open Sans Bold'
'Open Sans 700'
'Open Sans Bold 700'
'Open Sans:Bold'
The google docs themselves do not offer much help. Anyone have an idea of how I should write my CSS rules to display these variants?
They use regular CSS.
Just use your regular font family like this:
font-family: 'Open Sans', sans-serif;
Now you decide what "weight" the font should have by adding
for semi-bold
font-weight:600;
for bold (700)
font-weight:bold;
for extra bold (800)
font-weight:800;
Like this its fallback proof, so if the google font should "fail" your backup font Arial/Helvetica(Sans-serif) use the same weight as the google font.
Pretty smart :-)
Note that the different font weights have to be specifically imported via the link tag url (family query param of the google font url) in the header.
For example the following link will include both weights 400 and 700:
<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>
For CSS2
<link href='fonts.googleapis.com/css2?family=Comfortaa:wght#400;700'; rel='stylesheet' type='text/css'>
Here's the issue: You can't specify font weights that don't exist in the font set from Google. Click on the SEE SPECIMEN link below the font, then scroll down to the STYLES section. There you'll see each of the "styles" available for that particular font. Sadly Google doesn't list the CSS font weights for each style. Here's how the names map to CSS font weight numbers:
Thin 100
Extra Light 200
Light 300
Regular 400
Medium 500
Semi-Bold 600
Bold 700
Extra-Bold 800
Black 900
Note that very few fonts come in all 9 weights.
font-family:'Open Sans' , sans-serif;
For light:
font-weight : 100;
Or
font-weight : lighter;
For normal:
font-weight : 500;
Or
font-weight : normal;
For bold:
font-weight : 700;
Or
font-weight : bold;
For more bolder:
font-weight : 900;
Or
font-weight : bolder;
The API has been updated, now you have to import the desired font-weight using ":wght#700"
Ex: "https://fonts.googleapis.com/css2?family=Inter:wght#700&display=swap"
source: https://developers.google.com/fonts/docs/css2
In case anyone is looking for latest format with multiple font families + weights, see below (ex. w/ Open Sans + Roboto)
https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,300;0,400;0,600;0,700;0,800;1,800&family=Roboto:wght#500&display=swap
Note that the latest version of google fonts web interface has bad UX for displaying the code sample. There is a 'selected families' panel which displays and then disappears, and it overlaps the font variations 'add' buttons (the plus / minus signs), which are also located on the right. The solution, which is not intuitive, is to reload the page.
you can use the weight value specified in the Google Fonts.
body{
font-family: 'Heebo', sans-serif;
font-weight: 100;
}
I experienced a similar problem in lec 72 of angela yu's course and we have to define the font-weight along with font-family
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 3rem;
line-height: 1.5;
}
I have got this annoying problem where I cant seem to find a way to use specific styles from the ACTUAL font family and NOT with css or html styling.
In my case I am linking in to the html Google's Webfont: Lato. Now I only need the styles Normal400 and Bold700Italics.
Naturally, when you select the fonts on googlefonts, it generates the codes automatically. I copy and paste both codes one in my html doc and the other in the css. but I can't find out how to use the styles Normal400 and Bold700Italics of the font lato.
What I am getting at is the same as using a FONTS' 'italic' and 'bold' styles rather then an emphasis or bold tag in html to style. There is a massive difference in the outcome of the font's aesthetics.
Is there a way of doing this? If so, do I have to use the #fontface rule in my css or is there another way round it as I am scared of using this rule sometimes.
I have looked everywhere, even on google's forums and they all give the same answer: "font styling with css or html."
Link to the fonts:
<link href='http://fonts.googleapis.com/css?family=Lato:400,700italic' rel='stylesheet' type='text/css'>
Declare the font in your css:
.Lato-italic-700 {
font-family: 'Lato', arial, sans-serif;
font-style: italic;
font-weight: 700;
}
Place the class on the element you want it to be displayed on:
<p class="Lato-italic-700">This is Bold 700 Italic text</p>
It’s not clear what the problem is. But basically, when you have used a link element, as suggested by Google, to use Lato in regular and bold italic typeface, then any text for which you declare font-family: Lato, will appear
a) in Lato Regular, if its font weight and font style are normal
b) in Lato Bold Italic, if it has both font-weight: bold and font-style: italic applying to it
c) something else in other cases, possible e.g. synthetically bolded Lato Regular, if font weight has been set to bold but font style is normal.
For example, the following produces first Lato Regular, then Lato Bold Italic. You can (and normally should) use other markup or CSS instead; this is just a simplistic example:
<!doctype html>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700italic'
rel='stylesheet' type='text/css'>
<style>
body { font-family: Lato; }
</style>
Hello<br>
<i><b>Hello</b></i>
If problems remain, please post your HTML and CSS code and explain what you mean by “font's style not html or css font style” and how you can tell the difference from the visual appearance.
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!
I am using Google fonts in a few of my pages and hit a wall when trying to use variations of a font. Example: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans
I am importing three faces, Normal, Bold, ExtraBold via the link tag. The normal face displays correctly, but I cannot figure out how to use the variants of the font in my CSS
I tried all of the following as attributes for font-family but no dice:
'Open Sans Bold'
'Open Sans 700'
'Open Sans Bold 700'
'Open Sans:Bold'
The google docs themselves do not offer much help. Anyone have an idea of how I should write my CSS rules to display these variants?
They use regular CSS.
Just use your regular font family like this:
font-family: 'Open Sans', sans-serif;
Now you decide what "weight" the font should have by adding
for semi-bold
font-weight:600;
for bold (700)
font-weight:bold;
for extra bold (800)
font-weight:800;
Like this its fallback proof, so if the google font should "fail" your backup font Arial/Helvetica(Sans-serif) use the same weight as the google font.
Pretty smart :-)
Note that the different font weights have to be specifically imported via the link tag url (family query param of the google font url) in the header.
For example the following link will include both weights 400 and 700:
<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>
For CSS2
<link href='fonts.googleapis.com/css2?family=Comfortaa:wght#400;700'; rel='stylesheet' type='text/css'>
Here's the issue: You can't specify font weights that don't exist in the font set from Google. Click on the SEE SPECIMEN link below the font, then scroll down to the STYLES section. There you'll see each of the "styles" available for that particular font. Sadly Google doesn't list the CSS font weights for each style. Here's how the names map to CSS font weight numbers:
Thin 100
Extra Light 200
Light 300
Regular 400
Medium 500
Semi-Bold 600
Bold 700
Extra-Bold 800
Black 900
Note that very few fonts come in all 9 weights.
font-family:'Open Sans' , sans-serif;
For light:
font-weight : 100;
Or
font-weight : lighter;
For normal:
font-weight : 500;
Or
font-weight : normal;
For bold:
font-weight : 700;
Or
font-weight : bold;
For more bolder:
font-weight : 900;
Or
font-weight : bolder;
The API has been updated, now you have to import the desired font-weight using ":wght#700"
Ex: "https://fonts.googleapis.com/css2?family=Inter:wght#700&display=swap"
source: https://developers.google.com/fonts/docs/css2
In case anyone is looking for latest format with multiple font families + weights, see below (ex. w/ Open Sans + Roboto)
https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,300;0,400;0,600;0,700;0,800;1,800&family=Roboto:wght#500&display=swap
Note that the latest version of google fonts web interface has bad UX for displaying the code sample. There is a 'selected families' panel which displays and then disappears, and it overlaps the font variations 'add' buttons (the plus / minus signs), which are also located on the right. The solution, which is not intuitive, is to reload the page.
you can use the weight value specified in the Google Fonts.
body{
font-family: 'Heebo', sans-serif;
font-weight: 100;
}
I experienced a similar problem in lec 72 of angela yu's course and we have to define the font-weight along with font-family
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 3rem;
line-height: 1.5;
}