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>
Related
I am trying to generate pdf files using a MadCap Flare project, but the PDF files come out with the wrong font. I am using the latest version of Flare, 2019r2.
I am trying to generate paragraphs using the Flexo fonts from Duotype. All the fonts are installed in the main Windows font directory: C:\Windows\Fonts\DUROTYPE_-_FLEXO-REGULAR_1.OTF. This was accomplished by right clicking on the font and choosing "Install for all users".
An example of the issue is the h2 style. The stylesheet has the following declarations in the default section:
body
{
padding: 0 20px;
}
...
body,
div,
li,
p
{
color: #3b4151;
font-family: FlexoRegular, Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
margin: 0.5em 0;
mc-hyphenate: never;
orphans: 2;
widows: 2;
}
...
h2
{
color: #f8193f;
font-family: FlexoBoldIt, Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: normal;
font-size: 1.67em;
page-break-after: avoid;
}
The selector I actually want to use is under a #media section with the following declarations.
body
{
padding: 0;
position: relative;
margin: 0;
}
h2
{
color: #f8193f;
font-family: "Flexo-BoldIt", Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 9pt;
margin-bottom: 0px;
margin: 0px;
margin-top: 6px;
}
When I define the font-familiy as "font-family: "Flexo", Arial, "Helvetica Neue", Helvetica, sans-serif;" I get output with the Flexo font. However, when I try "Flexo-BoldIt" or 'Flexo-BoldIt' or "Flexo Bold Italic" or various other combinations of quotes and font names I get output with Microsoft Sans Serif. When I try to override the style with an explicit declaration such as
<h2 style="text-align: center;font-family: "Flexo-BoldIt"...">
the output is again in MS Sans Serif.
Adding declarations like
font-style: italic;
font-weight: bold;
doesn't help.
Why doesn't Flare generate output with the correct font? Also, why doesn't it generate output with Arial, as that is installed? If I remove "Flexo-BoldIt" from the font-family I get output with Arial.
Any help would be much appreciated.
Have you added font-face in CSS
#font-face
{
font-family: 'YourFontFamilyName';
src: url(../path/to/font);
}
After that use font like
h1
{
font-family: 'YourFontFamilyName';
}
Also, keep your fonts in project files so you can access it with a relative path easily.
Try this out and give me feedback :)
UPDATE
This is more of a tip for every project similar to this one.
Do not use the system installed fonts because if the user doesn't have that font installed on their system it will be wrong. Always put font files in a project directory and access them like above.
Convert the font file into base64
#font-face {
font-family: 'myfont';
src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}
Try this, from https://www.madcapsoftware.com/blog/madcap-flare-tip-use-custom-fonts-flare-outputs/:
The #font-face rule can have “font-family” defined as any name. However, I recommend using the default name seen in Flare. You can find out what name Flare is reading the font by going to the Home Ribbon and selecting the Font dropdown. The reason I recommend this is because if the font name is different than what appears in the dropdown, the PDF outputs will have to point to a different font name than your HTML5 outputs.
The name you show in the example looks like the name on the filesystem, not necessarily what the name appears as in the ribbon.
I am using Sass for my project and I am getting this error on my home page while importing fonts from my custom fonts folder of Merriweather.The problem is that when i check the network tab on chrome it shows that Agenda font file is included but not the merriweather font file.Both Agenda and Merriweather fonts are in separate folders.
Error :
**http://localhost/project-name/fonts/Merriweather/Merriweather-Italic.tff net::ERR_ABORTED 404 (Not Found)**
My Project folder structure in like this:
project-folder/fonts-folder/Merriweather-folder/All fonts of Merriweather here
project-folder/fonts-folder/Agenda-folder/All fonts of Agenda here
project-folder/scss-folder/partials-folder/global.scss
project-folder/scss-folder/variables.scss
QUESTIONS:
I want to know the is my syntax right for importing multiple fonts
from the same font family like Merriweather ?
what exactly i am doing wrong in variables.scss ??
Please help me to resolve this issue.
Code in Variables.scss
#font-face {
font-family: Agenda;
font-weight: 500;
font-style: normal;
src: url("../fonts/Agenda/Agenda-Medium.otf") format("opentype");
}
#font-face {
font-family: Merriweather-Italic;
font-weight: normal;
font-style: italic;
src: url("../fonts/Merriweather/Merriweather-Italic.tff") format("truetype");
}
#font-face {
font-family: Merriweather-Regular;
font-weight: normal;
font-style: normal;
src: url("../fonts/Merriweather/Merriweather-Regular.tff") format("truetype");
}
This is how i am using fonts in globals.scss
#import "../variables";
body{
font-family: Merriweather-Regular;
font-size: 22px;
background-color: $white;
}
h1{
font-family: Merriweather-Italic;
font-style: italic;
font-size: 94px;
}
h2{
font-family: Merriweather-Regular,Merriweather-Italic;
font-size: 42px;
}
h3{
font-family: Agenda;
font-size: 30px;
}
h4{
font-family: Merriweather-Regular;
font-style: bold;
font-size: 27px;
}
h5{
font-family: Merriweather-Regular;
font-size: 26px;
}
To be sure I would have to see a screenshot of your fonts folder, but I think the font isn't found because of typo in the font-face declaration. True-type font files usually have a .ttf extension instead of .tff.
That means you would have to adjust your #font-face declaration from:
#font-face {
// omitted font-family, weight and style for clarity
src: url("../fonts/Merriweather/Merriweather-Italic.tff") format("truetype");
}
to:
#font-face {
// omitted font-family, weight and style for clarity
src: url("../fonts/Merriweather/Merriweather-Italic.ttf") format("truetype");
}
At this point, so in variables.scss, I usually also declare a font variable for each font (type) for usage in the rest of my SASS files, e.g $merriweather--italic: "Merriweather-Italic", serif;
Therefore you can use these variables in your global.scss as such:
h1{
font-family: $merriweather--italic;
font-size: 94px;
}
I am using two fonts from font squirrel for this practice to style some of the my wordpress widget areas:Gothic and Playfair Display. But for some reason,only Playfair is being applyed and Gothic is being ignored.
Because its wordpress widget areas I cant actually display the html but basically the following is the CSS code which again works for one type font only:
CSS:
#font-face{
font-family: 'Playdisplay';
src: url('font/PlayfairDisplay-Bold.ttf') format('ttf'),
url('font/PlayfairDisplay-BlackItalic.ttf') format('ttf'),
url('font/PlayfairDisplay-BoldItalic.ttf') format('ttf'),
url('font/PlayfairDisplay-Italic.ttf') format('ttf'),
url('PlayfairDisplay-Regular.ttf') format('ttf'),
url('font/PlayfairDisplay-black.ttf') format('ttf');
font-weight: normal;
font-style: normal;
}
#font-face{
font-family: 'Goth';
src: url('font/GOTHIC.ttf') format('ttf'),
url('font/GOTHICB.ttf') format('ttf'),
url('font/GOTHICBI.ttf') format('ttf'),
url('font/GOTHICI.ttf') format('ttf');
font-weight: normal;
font-style: normal;
}
.mainfooter h3{
font-family: Goth, GOTHIC;
}
footer h1,
footer h2,
footer h3{
font-family: Playdisplay, PlayfairDisplay-Bold;
}
How can I use both fonts and apply anywhere in the site?
Try placing your font names in single quotes
.mainfooter h3{
font-family: 'Goth';
}
footer h1,
footer h2,
footer h3{
font-family: 'Playdisplay';
}
Also, you're using relative paths for your font files, check these are correct!
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);
}
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