I downloaded the custom font Rounded Mgen+ 1c into my react project.
But somehow, it doesn't work correctly.
What I did
Downloaded the font into public/fonts/ and src/.
Added import code into the src/index.css like below.
:
#font-face {
font-family: 'Rounded Mgen+';
src: url(./rounded-mgenplus-1c-bold.ttf) format('ttf');
}
:
Related
I've been using CoreUI Bootstrap for my Admin panel and everything is working smoothly. For CSS and Js I used laravel mix and in _custom.sass file I defined font family as following code:
#font-face {
font-family: "vazir";
src: url('../../fonts/Vazir.ttf');
}
and I assigned it to body:
body {
font-family: "vazir", sans-serif !important;
}
On Localhost font is loaded and configured successfully but when I upload my project on real server font is default CoreUI font.
I'm using the open-iconic library that comes with the default Blazor template in Visual Studio.
It's referenced in the css file #import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
I added some custom ttf fonts to my root folder. When referencing them in the css file like this:
#font-face {
font-family: ALittlePot;
src: url('../fonts/ALittlePot.ttf') format('truetype');
}
then the open-iconic icons disappear. I even tried removing the content and just putting #font-face { } the same thing happened. It obviously has something to do with using #font-Face.
I tried adding my font using #import url('../fonts/ALittlePot.ttf'); but then the font didn't render.
Where am I going wrong?
I'm currently developing a small project for my brother who needs to realize a website (he is in an art-school).
I was planning to do it in React (good for me to practice)
I recently started to use Sass and fell in love with it, it's so much handy than regular css !
Anyway,
He gave me a font to use for his website (https://www.velvetyne.fr/fonts/le-murmure/) but I can't manage it to import it in the project. I had read so many subjects but I can't make it work.
So I found their was two solutions, one is to use import because then the font will enter in the build pipeline, and the other is to use directly the build folder. Apparently using import is the best practice.
I found this answer saying we need to put them in an assets folder (https://github.com/angular/angular-cli/issues/5213#issuecomment-284783844) so this is what I did, this time I got no error message saying 'hey can't resolve blablabla' but it simply don't use the font.
+ I can put whatever I want like '/assets/somethings/dumb' I will not get any error message.
I'll send you a picture of my tree so you can see better
https://ibb.co/KjkCNJ1
Here is my _typography.scss
#font-face {
font-family: 'murmure';
src: url('/assets/fonts/Le_Murmure-Regular_web.eot');
src: url('/assets/fonts/Le_Murmure-Regular_web.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Le_Murmure-Regular_web.woff') format('woff'),
url('/assets/fonts/Le_Murmure-Regular_web.woff2') format('woff2'),
url('/assets/fonts/Le_Murmure-Regular_web.ttf') format('truetype'),
url('/assets/fonts/Le_Murmure-Regular_web.svg#svgFontName') format('svg');
font-weight: normal;
font-style: normal;
}
Which I import into my main.scss
// ABSTRACTS
#import './abstracts/functions';
#import './abstracts/mixins';
#import './abstracts/variables';
// BASE
#import './base/typography';
#import './base/base';
#import './base/animations';
#import './base/utilities';
// COMPONENTS
#import './components/input.scss';
// LAYOUTS
// PAGES
#import './screens/home';
which I import into my App.tsx
import '#assets/sass/main.scss';
Finally
I have a rule in my screens/_home.scss
.home {
&__title {
font-size: 500px;
font-family: "murmure", serif !important;
}
}
And the only thing that gets applied is the font-size
https://ibb.co/gt2Bvdz
Does someone have an idea how to make the fonts import ?
I'm really stuck into this :/
Have the impression I just tried every relative imports I could
I created a react project using create-react-app, and am working with this folder structure:
src/
Components/
Menu/
Menu.scss
Global/
fonts/
myfont.ttf
etc...
myfont.scss
In Menu.scss, I import using #import '../../Global/myfont';.
In myfont.scss, I include the font face:
#font-face {
font-family: 'myfont';
src: url('./fonts/myfont.ttf');
...
font-weight: normal;
font-style: normal;
}
I get "Error: Module not found".
If, for testing, I change the path to src: url('../../Global/fonts/myfont.ttf');, everything works.
Is there a way to set the URL path so it works regardless of where it is imported from?
I suggest you make a "base" scss file, where you write/import your fonts, icons, and other website-wide components, like header, footer etc. Then you import that base.scss file in each of your page's css.
base.scss:
$font-path: "../../Global/fonts" !default;
#font-face{
src: url('#{$font-path}/myfont.ttf');
...
}
...
And in each page, add:
#import "base;
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;