For a project, I have to use many style off a font.
Here is the link of the google font
Here is my css import
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);
What I would like to know is how can I define the font-family to display for example the "Open Sans Light 300 Italic"
Thanks
CSS
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);
body {
font-family: 'Open Sans', sans-serif;
}
body p {
font-style: italic;
font-weight: 300; /* You specify the number you see next to the fonts to change from light to bold ie you would put 700 etc. etc. */
}
I think this is what you're looking for.
body {
font-family: "Open Sans";
font-weight: 300;
font-style: italic;
}
300/400/700 is font-weight. If you want bold font use
font:bold(or 700) 12px/15px "Open Sans", sans-serif
if you want light italic use
font:300 italic 12px/15px "Open Sans", sans-serif
Related
So I downloaded a font (legally I bought it)
and the font looks really good. but it only displays in the brackets live preview.
when I open it in chrome, it just refuses to work. I followed all the instructions on the font when I bought it. Can anyone help me?
This is an image of the bracket font display which is what I want:
And this is the exact same code when I open the index.html file in Google Chrome.
This is the code I am using to get the font in CSS
#font-face{
font-family:"Ethnocentric W05 Italic";
src:url("/fonts/MTI-WebFonts-367222846/Fonts/5118942/e91f32ff-44ec-47c0-afd3-5cdeeb6c73c8.woff2")
format("woff2");
}
and this is what I used to put it in the header
font-family: "Ethnocentric W05 Italic";
If you declare a custom font using #font-face, the browser will try to fake the bold and italic styles if it can’t find them.
Instead of defining separate font-family values for each font, You can use same font-family name for each font, and define the matching styles, like so:
[css]#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-B-webfont.eot');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-BI-webfont.eot');
font-weight: bold;
font-style: italic;
}
.test {
font-family: Ubuntu, arial, sans-serif;
}[/css]
Then all you need to do is apply that single font-family to your target, and any nested bold or italic styles will automatically use the correct font, and still apply bold and italic styles if your custom font fails to load.
I'm new to css so I'm a little confused. Here is what I'm doing in my index.scss file
#import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,400i,700,800,800i,900i&display=swap');
body {
font-family: 'Nunito Sans', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I want to make all the paragraphs Nunito Sans Bold Italic. How can I do that in a specific file say components/link.js
To make all paragraphs styled with Nunito Sans in bold and italic, you first need to target every p element, then add the font-family and the font styles you need. For example:
p {
font-family: 'Nunito Sans', sans-serif;
font-weight: bold;
font-style: italic;
}
If you only want this css in that particular component, create a separate scss file and import it only into that component, for example:
#import './link-style.scss';
This may work
//index.scss
.paragraph {
font-family: 'Nunito Sans', sans-serif;
font-weight: bold;
font-style: italic;
}
<!--Link js -->
<p className="paragraph">
paragraph text
</p>
We want to modify default font in HTML using #font-face
#font-face {
font-family: Times;
font-style: normal;
font-weight: 400;
src: local('serif');
}
in the above code we want to override Times font to serif, but above code is not working and Times font is getting used all the time instead of serif
Try this example, it works for me -- https://jsfiddle.net/gbk4rLw3/16/. However, it doesn't seem to work if you try to switch a font with a generic font type such as serif or sans-serif, but any other web-safe font seems to work.
Test code is here as well.
HTML
<div class="test">
TESTING
</div>
CSS
.test{
font-family: Times;
}
#font-face {
font-family: Times;
font-style: normal;
font-weight: 400;
src: local("Impact"); /* Try replacing with Arial, Comic Sans MS, etc....*/
} /*Doesn't seem to work with generic font types (serif, sans-serif)*/
If you want a serif font, try using "Courier New".
I have a list of fonts that I'm pulling in from Google's CDN. They list documentation here but I'm having issues setting up the semibold italic styles. Is there a way to make this work?
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,400,300,600' rel='stylesheet' type='text/css'>
#semibold: "Open Sans:600", sans-serif;
#semibold-italic: "Open Sans:600italic", sans-serif;
#light: "Open Sans:300", sans-serif;
I know that I can set the font-weight and style in font-face.
How can I include everything in my variable declaration?
I'm not too familiar with how Google Fonts works, but maybe a mixin would be a decent alternative for you.
.semibold {
font-family: 'Font', 'Font B', 'Font C';
font-weight: 500;
font-style: normal;
}
div {
.semibold;
}
You can use parametric mixins. You can declare a style, say .font, which accept several parameters — in this case, it should accept font-family, font-weight and font-style. Of course you are free to add/remove other font- or text- related properties for further fine-tuning.
// Declare mixin
.font(#fontFamily: Arial, sans-serif; #fontWeight: normal; #fontStyle: normal) {
font-family: #fontFamily;
font-style: #fontStyle;
font-weight: #fontWeight;
}
// Sample styles
.semibold {
.font("Open Sans", sans-serif; 600; normal);
}
.semibold-italic {
.font("Open Sans", sans-serif; 600; italic);
}
.light {
.font("Open Sans", sans-serif; 300; normal);
}
When i use fontface, the browser needs some time before the font is downloaded and rendered, until then the browser default font is shown. I have tried to give Arial as fallbackfont and as general HTML/BODY font, but this does not change the problem.
is there a way to avoid this?
#font-face {
font-family: 'StrukturProBold';
src: url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.eot');
src: url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.eot?iefix') format('eot'),
url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.woff') format('woff'),
url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.ttf') format('truetype'),
url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.svg#webfontpQgNQDw9') format('svg');
font-weight: normal;
font-style: normal;
}
body, html {
font-family: "StrukturProBold", Arial, Helvetica, FreeSans, sans-serif, "open-serif", open-serif;
}
h1 {
font-family: "StrukturProBold", Arial, Helvetica, FreeSans, sans-serif, "open-serif", open-serif;
}
This is called a "Flash Of Un-styled Text" (or FOUT). You wont see it in Webkit browsers, because they hide the text until the font has been loaded. If you want to be more agressive with forcing other browsers to hide the FOUT, you can do it with some pre-written JavaScript.
Paul Irish explains it all here:
http://paulirish.com/2009/fighting-the-font-face-fout/
Here's the code you need:
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: ['yourfont'],
urls : ['http://example.com/yourfontdeclaration.css']
}
});
</script>
and some CSS:
h2 {
font-family: 'yourfont', helvetica, sans-serif;
}
.wf-loading h2 {
visibility: hidden;
}
Unless the visitor has the specialty font installed on their system, the browser has to download it just like it would an image file, or a linked stylesheet or .js file.
From reading the comments above, you're probably already doing the best that you can.
StrukturProBold is just a simple sans-serif font.
You can expand your list of secondary font choices though, maybe Arial and Helvetica aren't as good of a choice as say Verdana, or Trebuchet
font-family: "StrukturProBold", Trebuchet, Verdana, Helvetica, Arial, sans-serif;