#font-face {
font-family: Gumela;
src: url('../src/fonts/*');
}
*{
font-family: "Gumela";
font-weight: normal;
font-size: 20px;
}
I used this in visual studio while working on a react app navbar but the browser keeps showing font couldn't be downloaded error, I tried changing the path as well as redownloading the font but nothing changed, please help me with this
Make sure your #font-face rule is complete.
It should rather look something like this:
#font-face {
font-family: Gumela;
font-style: normal;
font-weight: 400;
src: url(../src/fonts/gumela.woff) format('woff2');
}
Better specify a format and the font-weight.
Check the path/URL
you can easily test this by entering the font files url in you address bar:
yourPage.com/src/fonts/gumela.woff
Common mistake:
You fonts folder is actually in your css directory. So you src should rather be:
src: url(fonts/gumela.woff) format('woff2')
So doublecheck your paths. As a last resort you might also try absolute paths.
Related
I'm creating a React/Ionic project and using SASS for styling, but I had a hard time adding the stylings to the project.
I went to the font-awsome website, created the package, added the fonts and added the file call to my routes file. But when I use the icons, they don't appear.
the fonts folder:
font-awesome.module.scss file:
#font-face {
font-family: 'cbm-icons';
src : url('./fonts/cbm-icons.eot?uwy7j0');
src : url('./fonts/cbm-icons.eot?uwy7j0#iefix') format('embedded-opentype'),
url('./fonts/cbm-icons.ttf?uwy7j0') format('truetype'),
url('./fonts/cbm-icons.woff?uwy7j0') format('woff'),
url('./fonts/cbm-icons.svg?uwy7j0#cbm-icons') format('svg');
font-weight : normal;
font-style : normal;
font-display: block;
}
[class^="cb-"],
[class*=" cb-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family : 'cbm-icons' !important;
speak : never;
font-style : normal;
font-weight : normal;
font-variant : normal;
text-transform: none;
line-height : 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing : antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cb-cross:before {
content: "\ea0f";
}
.cb-checkmark:before {
content: "\ea10";
}
.cb-warning:before {
content: "\ea07";
}
Here is the import in file in my routes file:
The correct way of setting this up:
First, edit scss/variables.scss and edit the $fa-font-path variable to point to where your webfonts are.
Then, just add to your main (in your case, global) scss file:
#import "./fontawesome/scss/fontawesome.scss";
Then you can use the mixins as follows:
.twitter {
#extend %fa-icon;
#extend .fab;
&:before {
content: fa-content($fa-var-twitter);
}
I followed the wiz recommendations, but tweaked it and did it my way. I took the opportunity to make some changes to my code.
So i did like this. First, I centered all my styling in global.scss. Including the style imports from ionic and the #mixin I created from font-awesome:
#import './variables.module.scss';
#import './font-awesome.module.scss';
#import '#ionic/react/css/core.css';
#import '#ionic/react/css/normalize.css';
#import '#ionic/react/css/structure.css';
#import '#ionic/react/css/typography.css';
#import '#ionic/react/css/padding.css';
#import '#ionic/react/css/float-elements.css';
#import '#ionic/react/css/text-alignment.css';
#import '#ionic/react/css/text-transformation.css';
#import '#ionic/react/css/flex-utils.css';
#import '#ionic/react/css/display.css';
#include font-awesome;
// the rest of the global styling...
}
font-awesome.scss file settings:
#mixin font-awesome {
// file settings...
}
And in the router.tsx file I left only the call to global.scss:
import 'src/presentation/styles/global.scss'
// remaining importations...
const Router: React.FC = () => {
return (
// Routes...
)
}
export default Router
I load the custom font with the location in the static/fonts folder, it works fine when in development mode (docusaurus start), but when I build (docusaurus build), the results show that the fonts I used are not loading, because the fonts folder is outside the static folder.
Folder structure when build
This is the snippet I made in the custom.css file
#font-face {
font-family: 'Indonesiana';
src: url('/static/fonts/Indonesiana.woff') format('woff'),
url('/static/fonts/Indonesiana.svg#Indonesiana') format('svg'),
url('/static/fonts/Indonesiana.eot'),
url('/static/fonts/Indonesiana.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
Thanks.
Just use relative paths and you will have a proper links upon build (assuming your css is in src/css):
#font-face {
font-family: 'Indonesiana';
src: url('../../static/fonts/Indonesiana.woff') format('woff'),
url('../../static/fonts/Indonesiana.svg#Indonesiana') format('svg'),
url('../../static/fonts/Indonesiana.eot'),
url('../../static/fonts/Indonesiana.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
You should also add a font like this:
#font-face {
font-family: "Indonesiana";
src: url('/static/fonts/Indonesiana.woff') format('woff');
}
:root {
--ifm-font-family-base: "Indonesiana"
}
There are other ways to do it for different modes, such as:
--ifm-font-family-monospace: "Indonesiana";
I am using Ionic3:
Your system information:
Cordova CLI: 6.4.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3.1 Build version 8E1000a
I have the following font: Ormont_Light.ttf
As you can see above, I try apply this new font in the app.scss file. However, I cannot seem to make it take effect.
As you can see, it is still using the Ionic default of:
font-family: "Roboto", "Helvetica Neue", sans-serif;
Question
Please can anyone advise how to implement a new font using a ttf file in Ionic 3?
UPDATE
I add the following:
#font-face {
font-family: Ormont_Light;
src: url(../assets/fonts/Ormont_Light.ttf) format("ttf");
font-weight: normal;
font-style: normal;
}
body {
font-family: Ormont_Light !important;
}
Now I get the font showing up in the source:
body {
font-family: Ormont_Light !important;
}
But it's not being applied to the app on a global level as expected.
UPDATE
variables.scss
$font-family-base: "Ormont_Light";
$font-family-ios-base: $font-family-base;
$font-family-md-base: $font-family-base;
$font-family-wp-base: $font-family-base;
Thanks, That kind of works. It is now applying Ormont_Light too all my styles which is great. i.e. the dom now has:
body {
font-family: Ormont_Light !important;
}
But the the displayed font is using Times New Roman font, which I guess is the browser default when it cannot find the font referenced. So I guess my path to my .ttf file is incorrect.
Where do you keep you .ttf file?
You need to override the Ionic Sass Variables .
You need to add this font-face in src/theme/variables.scss.
#font-face {
font-family: 'Ormont_Light';
src:url('../assets/fonts/Ormont_Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
$font-family-base: "Ormont_Light";
$font-family-ios-base: $font-family-base;
$font-family-md-base: $font-family-base;
$font-family-wp-base: $font-family-base;
Im trying to install and use a custom font ( Chewy.ttf ) in Ionic 2
i already tried to use it like css with #font-face {
font-family: Chewy;
src: url(../../www/assets/fonts/Chewy.ttf);
}
And in the Browser it works just fine but when I build it
it won't work anymore
Thankful for any help
first put your font file in src/assets/fonts/name.ttf path.
then in src/app/app.scss
#font-face {
font-family: name;
src: url(../assets/fonts/name.ttf) format("ttf");
font-weight: 200
}
body {
font-family: name !important;
}
For now you can use Google fonts, for example download this one : https://fonts.gstatic.com/s/raleway/v11/yQiAaD56cjx1AooMTSghGfY6323mHUZFJMgTvxaG2iE.woff2
Just copy the file downloaded to the folder "www/assets/fonts" and rename it if you want.
In the file app.scss copy this code:
#font-face {
font-family: "Raleway";
src: url("../assets/fonts/Raleway.woff2") format("woff2");
}
you can now use your new font
H1 {
font-family : "Raleway";}
I am just wondering what would be the best approach to using cssnext custom properties like these, alongside css modules in react.
Is there a way to share these across modules ?
:root{
--primary: pink;
--fontSize: 1rem;
--fullWidth: 100%;
--color: red;
--gutter: 1.618rem;
}
#custom-media --small-viewport (max-width: 30em);
#custom-media --large-viewport (min-width: 75em);
#custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);
EDIT: *** ok i tried this, thought it worked but hasn't
:global(:root) {
--primary: pink;
--fontSize: 1rem;
--fullWidth: 100%;
--color: pink;
--gutter: 1.618rem;
}
CSS Modules should only handle selectors that are classnames (that start with a dot). So it should not be an issue and you should be able to use those custom definition as soon as they are in the file. You can use postcss-import to inline your file that contains global definitions.
Another solution is to define this global values using postcss plugin options:
https://github.com/postcss/postcss-custom-properties#variables
https://github.com/postcss/postcss-custom-media#extensions
Because the postcss-loader only transforms a single file at a time you must import your custom properties, e.g.
#import './root.css';
.foo {
color: var(--primary);
}