I am learning how to use variable Google fonts and wrote this HTML:
<h1>This heading should be condensed.</h1>
with the following CSS:
#import url('https://fonts.googleapis.com/css2?family=Anybody:wdth,wght#50..200,100..700&display=swap');
h1 {
font-family: 'Anybody';
font-weight: 900;
font-stretch: 50%;
}
The font 'Anybody' supports width axis (https://fonts.google.com/knowledge/using_type/styling_type_on_the_web_with_variable_fonts) so why isn't the text condensed?
A demo on JSFiddle: https://jsfiddle.net/yr4h8wg1/
In the #import URL, you specified a wdth range of 50..200. But it appears the Anybody font only supports a wdth range of 50..150 — see https://fonts.google.com/specimen/Anybody/tester. In your JSFiddle demo, change the "200" to "150" and it works.
#import url('https://fonts.googleapis.com/css2?family=Anybody:wdth,wght#50..150,100..900&display=swap');
Providing a font-weight of 900, and a font-stretch of 50%:
https://fonts.googleapis.com/css2?family=Anybody:wdth,wght#50,900&display=swap
Related
This is my first time using detail fonts but for some reason it loses all of its detail.
Expected result:
Actual result:
footer h3 {
font-family: "Elegance";
font-size: 50px;
position: relative;
right: 30px;
}
#font-face {
font-family: "Elegance";
src: url("../fonts/GeraldinePersonalUseItalic-PK12m.ttf");
}
<footer>
<h3>Greetings</h3>
</footer>
I believe you have your font weight set to bold in your CSS somewhere.
I was able to reproduce this issue by setting my font-weight to bold.
Try changing it to normal/400 and see if that fixes it.
I want to apply a google font to only specific css selectors or elements in my page.
I also want the same font in mutliple weights (Eg Roboto). Not controlled using the css attribute but actually using the separate font versions provided by google.
If possible id prefer not to have an external stylesheet.
Is this possible? I dont mind doing in a script tag if i have to.
Here you have a example and I've put the style in the html so you dont need a external stylesheet although I wouldn't recommend it
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700&family=Rowdies&display=swap" rel="stylesheet">
<style>
h2,
h3,
span {
font-family: 'Roboto', sans-serif;
}
h2 {
font-weight: 500;
}
h3 {
font-weight: 700;
}
h1,
p {
font-family: 'Rowdies', cursive;
}
</style>
<h1>h1 Rowdies</h1>
<h2>h2 Roboto font-weight 500</h2>
<h3>h3 Roboto font-weight 700</h3>
<p>p Rowdies</p>
<span>span Roboto</span>
I also want the same font in mutliple weights (Eg Roboto). Not controlled using the css attribute but actually using the separate font versions provided by google.
Not a 100% sure if its possible or not but I see no reason why you can't just use the font-weight property
I'm using custom fonts in WordPress. I do it by defining font family. I'm having problem if line spacing with One if my fonts. If I use line-height code in my custom css I'd theme, it's applied to all the fonts which isn't required. I just want to change line spacing of problematic font. Can we define line spacing for a font while defining its font family?
Best Regards
You can implement font-family with line-height in one class. I mean something like this:
HTML:
<div class="lato-font">Text</div>
<div class="monospace-font">Text</div>
CSS:
.lato-font {
font-family: Lato, sans-serif;
line-height: 1.6;
}
.monospace-font {
font-family: monospace, serif;
line-height: 1.6;
}
In this case you can set custom line-height for each font.
You'll have to define line-height for each element or class that uses the custom font.
h1,h2,h3,h4,h5,h6,.lead-text,.some-other-class,li {
font-family: ######;
line-height: 20px;
}
I want to use a custom font. When I load it into the page using
#font-face {
font-family: 'Echelon';
src: url('font/echelon-rg.ttf');
font-style: normal;
}
#font-face {
font-family: 'Echelon';
src: url('font/echelon-it.ttf');
font-style: italic;
}
then it is smaller then all the default fonts available in my browser. I want to enlarge them, let's say to 150% of current size. The problem is that when I do
body * {
font-family: Echelon;
font-size: 150%;
}
then all h1..h6, p, div, span elements share the same size (also all custom settings of bootstrap are overwritten) and I can't use it like that. I want to change all elements relatively to their original (e.g. bootstrap) size. If I did it manually, I would have to rewrite hundreds of elements, so that's a bad option. How can I do it in a clean and easy way?
PS this is not about window/screen size.
Instead of declaring for body, try to declare for certain sections you need to change in your CSS, this way you don't need to change manually.
Lets say, you want your paragraph alone to be of 150% then declare as:
p{ font-size: 150% } in your CSS this should restrict to paragraph's alone.
Hope it helps :-)
I've used roboto font from Google Fonts, but in Safari font-weight:bold doesn't work and I don't want to use css class.
Is there any hack for inline css only for Safari?
body{
font-family:'roboto';
}
<label style="font-weight:bold"></label>
try <label style="font-weight: 700;">Foo Bar</label> or in css label { font-weight: 700; }
Font-Weight 400 represent a "regular" font, while 700 is a "bold" font.
I set up a little Fiddle for this: http://jsfiddle.net/5cqdysug/
If you have a TTF/OTF file you could make a webfont out of it with http://www.fontsquirrel.com/tools/webfont-generator, afterwards you can controll the font-weight stuff of the font, for more information on this please check the link provided by #dcc http://www.maketecheasier.com/use-google-roboto-font-everywhere/
Hope this helps