I want to add AvantGard font to one paragraph in my React app, but it seems the font has no effect and I don't know why, here is how I am adding it:
I keep it as a ttf file in my assets folder.
I have global scss file index.css and I declare it there like this:
#font-face {
font-family: 'AvantGard';
font-style: normal;
src: url('./assets/fonts/avant_gartt/AvantGard.ttf');
}
I also have a variables.scss in which I keep it like this:
$avantGard: 'AvantGuard';
I import my variables in my component's css like this:
#import './variables.scss';
and then I just set the font-size of my paragraph:
font-family: $avantGard;
Does anyone have any idea why my font does not work? The rest of my fonts work the same way, but not this one.
Check your spelling on number 3.
AvantGard or AvantGuard?
Related
I have added font and tried to make mixin (also tried as varible, result is the same) to use it.
All sass files are connected through "style.sass"
#import '_interface'
#import '_fonts'
file "_fonts.sass", where I added font and made mixin
#font-face
font-family: 'Museo Sans Light'
src: url('../fonts/MuseoSansCyrl-300.eot')
src: url('../fonts/MuseoSansCyrl-300.eot?#iefix') format('embedded-opentype'),
url('../fonts/MuseoSansCyrl-300.woff') format('woff'), url('../fonts/MuseoSansCyrl-300.ttf')
format('truetype')
font-weight: normal
font-style: normal
#mixin reg
font-family: 'Museo Sans Light'
font-weight: 300
Then I tried to use it into "_interface.sass" for body tag:
body
box-sizing: border-box
color: $text-color
+reg
In the result I caught sass exception "no mixin named reg"
I will very grateful, If someone help!
Thank You.
SASS files are processed and loaded in an order-dependent way, so the file in which a mixin (or variable or function, etc.) is declared must be imported before that mixin is used in other files.
In your example, your mixin reg is declared in _fonts and used in _interface. For SASS to recognize and load reg, _fonts must be imported. After _fonts is imported, all subsequently loaded files, like _interface, will have access to reg.
A common pattern of working with shared SASS mixins, variables, or functions, is to create and store them in a single place (e.g. a file named _mixins, _vars, _functions) which you then import in your main SASS stylesheet before individual stylesheet modules. That way, you know that everything you need is already declared and available.
That might look something like this:
#import "_vars"; // Everything below knows about contents of _vars
#import "_mixins"; // Everything below knows about contents of _mixins
// These files can use everything above!
#import "_fileThatUsesSharedVariables";
#import "_fileThatUsesMixins";
#import "_fileThatUsesMixinsAndVariables"; // This last file can use everything above it!
i have this template to edit and i want to change the font
here's what i have
#import url(font-awesome.min.css);
#import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
i want to use this font: https://fonts.google.com/specimen/Playfair+Display?selection.family=Playfair+Display
then i have like five places in the css code where the it shows
font-family: FontAwesome;
what i did was i downloaded the PlayfairDisplay and pasted in the "font" folder, then i changed all the "font-family:" to the name of the new font, but that did not change anything.. am i missing something?
If you want to use font files instead of the google import, you will have to use #font-face in css and point it to the font file. For example:
#font-face {
font-family: your font name;
src: url(sansation_light.woff);//add your font file here
}
div {
font-family: myFirstFont;
}
you can refer to the following example from w3 schools for more examples: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
i want to change semantic-ui default font with #font-face but no matter...
i tried change in less file(site.variables) but I do not know how change it
i tried add my font with other custom css file but it not work
#font-face {
font-family: 'fontname';
src:url('themes/basic/assets/fonts/fontname.eot');
src:url('themes/basic/assets/fonts/fontname.eot?#') format('eot'),
url('themes/basic/assets/fonts/fontname.woff') format('woff');
}
body{
font-family: 'fontname';
}
I know two ways to change font-face, using google fonts or offline fonts:
Using google fonts:
We need to have the resources of Semantic UI, you can get here:
https://semantic-ui.com/introduction/getting-started.html
It is required to create the file site.variables in semantic/src/site/globals/
We search for the source that we like most at https://fonts.google.com/ and copy the name.
In the file site.variables we add the name of the font to the variable #fontName as follows:
/*******************************
User Global Variables
*******************************/
#fontName : 'Roboto';
Finally we execute the command glup build-css, the changes will be reflected in the file semantic /dist/semantic.css
Using offline fonts
We need to have the resources of Semantic UI, you can get here:
https://semantic-ui.com/introduction/getting-started.html
It is required to create the file site.variables in semantic/src/site/globals/
In the file site.variables we add the variable #importGoogleFonts with the value false;
/*******************************
User Global Variables
*******************************/
#importGoogleFonts : false;
#fontName : 'fontname';
It is required to create the file site.overrides in semantic/src/site/globals /
In the file site.overrides we add our font-face
/*******************************
Site Overrides
*******************************/
#font-face {
font-family: 'fontname';
src:url('themes/basic/assets/fonts/fontname.eot');
src:url('themes/basic/assets/fonts/fontname.eot?#') format('eot'),
url('themes/basic/assets/fonts/fontname.woff') format('woff');
}
Finally we execute the command gulp build-css, the changes will be reflected in the file semantic /dist/semantic.css
This video maked by #Aditya Giri explain how change font family from google fonts
https://www.youtube.com/watch?v=cSdKA-tZEbg
In the next issue #jlukic explain how use offline fonts
https://github.com/Semantic-Org/Semantic-UI/issues/1521
Regards
You can do the following:
Add the following to a .css file:
#font-face {
font-family: 'fontname';
src:url('themes/basic/assets/fonts/fontname.eot');
src:url('themes/basic/assets/fonts/fontname.eot?#') format('eot'),
url('themes/basic/assets/fonts/fontname.woff') format('woff');
}
Import the above code before semantic's site.min.css
Change the #fontName to 'fontname'
#importGoogleFonts should be false since you don't want to import any fonts from Google
By default the above will applied to body
It's an old question but I just wanted to add one thing.
Because all Semantic UI elements inherits the ui class you could do it like this:
.ui {
font-family: 'fontname' !important;
}
Not so elegant but it works.
This is the complicated solution https://stackoverflow.com/a/54208399/2374997 but if you want a simpler approach you could follow this example:
/*In your .css file, loaded after semantic.min.css*/
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
font-family: 'Montserrat' !important;
}
You can use google Link:
Add to index.html google link. For example:
<linkhref="https://fonts.googleapis.com/css2?family=Rubik+Glitch&display=swap"rel="stylesheet"/>
Add Font in semantic.ui> site> globals > site.variables. For example:
/*******************************
User Global Variables
*******************************/
/*--FONTS--*/
#pageFont: Rubik Glitch;
I found this in a css file, but I don't understand how it works?
#import url(/t/1.css?apiType=css&projectid=8f2a6800-87fc-4721-88c2-c4395f5c2529);
#font-face{
font-family:"Gill Sans W01_n3";
src:url("/dv2/2/2cebe80c-b289-4ae0-a3b0-baa82c6c6e10.eot?d44f19a684109620e484157aa090e818164b583323d003aed8738c486c8f2be5451a12b579fdb3b84f52c077b1b063612babe72c6cf13ea84e96a257fd04f94aa22a2e2c342ce62d6867611914a6d8b6aea98add427c897e37055b90046e50504037af165c645dd51b4dc26ecc8321d6196fc3e54c1a35c2ef7a466d10159a3ee117d8214a55b23616&projectId=8f2a6800-87fc-4721-88c2-c4395f5c2529") format("eot");
}
Basically, those CSS statements are creating a #font-face. So, the src:url is just linking to a file that contains the 'eot' of the font. Without the URL, the CSS does not know what the font looks like.
What is right way to make available custom fonts (e.g. google fonts) in my new theme?
It look like this issue:
https://github.com/uikit/uikit/issues/111
I did make what they says, only paste this code in the uikit.less:
/* Custom Fonts */
#font-face {
font-family: 'opensanscondensed';
src: url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
}
But it did not works. And i cant find where i should specify font-family for some elements(nav, top-menu, etc .. )
I would be grateful for any answers.
The url that you are pasting in the src property is an url of a css file (that google generates for you to import the font faces). You can see that it already generates font faces for you:
http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700
What you need to do in your style sheet file is just importing the css from the url. Something like this:
#import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700)
and then you can use it like so:
font-family: 'Open Sans Condensed', sans-serif;
DEMO