I have custom fonts which I would like to import via css using webpack.
css:
#font-face {
font-family: 'SBonusDisplay';
src: url('../../assets/fonts/SBonusDisplay-Regular.ttf')
}
h2 {
font-family: 'SBonusDisplay' !important;
font-style: normal;
font-size: 1.125rem;
}
This is part of my webpack config:
{
test: /\.(woff(2)?|ttf|eot|otf|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]-[hash:base58:3].[ext]',
outputPath: 'fonts/'
}
}
]
}
For some reason the right font is not showing up. its completely different font. any idea what I am doing wrong?
Just u are aware I am working on a PWA Studio Magento web app, the webpack config is quite long and thats why I just paster part of it that is relevant to the loading fonts.
Are you able to please give the URL of this site? and please create a proper fontkit with https://www.fontsquirrel.com/tools/webfont-generator
hope you will get the results you want
Related
I am using the Web Font Loader to manage the loading of fonts in my code. But I'm finding that, even when I specify a bold weight for a particular font, the loader is only loading the normal weight in advance, and only subsequently loading the bold variant.
In the html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
In the javascript:
var WebFontConfig = {
"timeout": 3000,
"classes": false,
"custom": {
"families": [
"TeX Gyre Adventor:700n"
],
"urls": [
"./css/fontstuff.css"
]
},
active: function () {
setTimeout(function() {
nowDoOtherStuff();
}, 2500);
}
};
WebFont.load(WebFontConfig);
In fontstuff.css:
#font-face {
font-family: 'TeX Gyre Adventor';
font-style: normal;
font-weight: 400;
src: url('../fonts/TexGyre/texgyreadventor-regular-webfont.woff2') format('woff2'),
url('../fonts/TexGyre/texgyreadventor-regular-webfont.woff') format('woff'),
url('../fonts/TexGyre/texgyreadventor-regular.otf') format('opentype');
}
#font-face {
font-family: 'TeX Gyre Adventor';
font-style: normal;
font-weight: 700;
src: url('../fonts/TexGyre/texgyreadventor-bold-webfont.woff2') format('woff2'),
url('../fonts/TexGyre/texgyreadventor-bold-webfont.woff') format('woff'),
url('../fonts/TexGyre/texgyreadventor-bold.otf') format('opentype');
}
So I am triggering my main function nowDoOtherStuff() off the active event hook, so according to my understanding by this point all the requested fonts should be available and ready... that's the point of Web Font Loader?
I put a delay of 2500ms so that it's clear in the Network tab what resources have actually been fetched when the active event fires, and what I see is:
Firstly, I'm not even requesting texgyreadventor-regular-webfont.woff2 so why is it being fetched at all?
Secondly, and most importantly, why is texgyreadventor-bold-webfont.woff2 (i.e. the font I requested) not actually fetched and ready when the active event fires? It's clear from the waterfall timing (and the artificial 2500ms delay) that the bold variant is only fetched after the active fires.
Why is Web Font Loader prioritizing the fetching of a font I didn't even ask for, and not fetching the font I actually want? This is causing issues with how the subsequent code lays out the content.
BTW this issue is solved by using a preload (which I have only more recently discovered) in the <head> as follows:
<link rel="preload" href="./fonts/TexGyre/texgyreadventor-bold-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
However, I would like to get the Web Font Loader approach working, without having to use preload... I thought that the Web Font Loader was already meant to be implementing a preload functionality?
I am having trouble in loading fonts from local and I am pointing to the directory. Can someone help me with it ?
Here is my code
#font-face {
font-family: 'My font';
src: url('./fonts/Myfonts-webfont.eot');
src: url('./fonts/Myfonts-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/Myfonts-webfont.woff') format('woff'),
url('./fonts/Myfonts-webfont.ttf') format('truetype'),
url('./fonts/Myfonts-webfont.svg#my_fonts_otbook') format('svg');
font-weight: normal;
font-style: normal;
}
and using it as
.btn {
font-family: 'My font', sans-serif;
max-width: 100%;
width: 20%;
height: 8%;
}
I suggest having a look at this
Also depending where you have them stored i.e. assets/fonts you must be pointing towards the directory.
font-face syntax
Example
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺︎'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
I tried different things and finally able to find the issue. its the storybook web-pack config causing the issue. Instead of pushing module.rules to storybook default webpack config I overwrote rules and it worked.
Have you use webpack file-loader to load a path, you dont have to specify where you font files reside. As long as you include your font files inside src/assets/fonts, file-loader will find it for you.
I have the following problem: I built a nuxt.js vue app, which uses a google font.
I load it in the head (by adding the url to the head section of my nuxt.config.js) https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700
I then use a sass-variable:
$s-font-family-base: 'Playfair Display', serif;
Which I use throughout my stylings to display this font.
Now when I check my browsers inspector while running a dev server, everything looks alright:
But if I use yarn generate (nuxt generate respectively) this will result in a font-family property with stripped quotes. Also if I push production to live.
Of course this is not nice, leads to invalid CSS, and maybe results in font loading failure...
Now I assume this is linked to nuxts css-loader:
https://github.com/webpack-contrib/css-loader
But I am not fully sure if I should open an issue there.
(I started to create a minimal nuxt repo to reproduce, but then I experienced a bug within the getting started guide: https://cmty.app/nuxt/nuxt.js/issues/c9213) 🙈🙈🙈
Anyway, in the meantime I just wanted to reach out for some pointers on this topic.
Cheers and thanks for any help.
This solved me.
cssnano option
https://cssnano.co/optimisations/minifyfontvalues/
before
.box {
font-family: "Helvetica Neue", Arial, Arial, sans-serif;
}
after
.box {
font-family: Helvetica Neue, Arial, sans-serif;
}
your nuxt.config
build: {
postcss: {
plugins: {
cssnano: {
preset: ['default', {minifyFontValues: {removeQuotes: false}}]
}
}
}
},
I have a Polymer 2 app with an explicit --paper-font-common-base specified before loading any of the components:
--paper-font-common-base: {
font-family: 'Comic Sans';
/* Not really, nobody's that evil, but problem is there for any font */
};
Then, at some point when loading Polymer components, for instance paper-dialog, will import typography.html
<link rel="import" href="../paper-styles/typography.html">
In turn typography.html imports Roboto and overrides the mixin:
<link rel="import" href="../font-roboto/roboto.html">
...
<custom-style>
<style is="custom-style">
html {
--paper-font-common-base: {
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
};
This overrides the font face I've specified, but also goes and downloads Roboto from Google's CDN, which I explicitly do not want it to.
Other Polymer components, for instance paper-radio-button take a different approach:
/*
This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
*/
How do I set --paper-font-common-base so that Polymer components use the same font as the rest of my application?
Looks to me like <custom-style> is loading directly into your <head> tags as it's wrapped in <script> tags.
To over ride this behaviour you'd need to add your script higher up in the <head> tags also.
One way to get around this is to make your own font-roboto dependency with an empty roboto.html file. Then in your bower.json you would force your dependency to be the resolution to the font-roboto conflict.
I'd suggest to
Fork <paper-dialog>, and remove the import of typography.html
Load your own copy of <paper-dialog>
File a ticket, or a pull request, for <paper-dialog>
If your change is officially accepted, load the official <paper-dialog>, again.
If you want this font to work on the entire web app, is your
--paper-font-common-base: {
font-family: 'Comic Sans';
};
declared into a custom-style element ?
If not try that :
<custom-style>
<style>
html {
--paper-font-common-base: {
font-family: 'Comic Sans';
};
}
</style>
</custom-style>
And if you add that into you root element, it should be applied in all the child elements except if some custom components override their own font.
Edit :
There is a plunker example.
In .bowerrc add this:
{
"scripts": {
"postinstall": "node -e \"require('fs').writeFileSync('bower_components/font-roboto/roboto.html', '')\""
}
}
It will make roboto.html as an empty file without any error requests after build.
I want to load a font in my CSS and/or HTML code. I need two fonts(bigsmalls-bold and lft-etica-web) but I don't find how download the font. I only I find a javascript code in
https://typekit.com
This javascript code I have to add in head of my html code.
I did it, but don't change my fonts. Could someone help me please?
Thank you so much
Try using #font-face { url } in your css file. Uploading the font
Like this :
#font-face
{
font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot');
}
The .eot is for IE9
hai you have two options
1st one google font
2nd one CustomFonts
#font-face {
font-family: "MyCustomFonts";
src: local("MyCustomFonts"), url("../fonts/ArialNarrow.ttf") format("truetype");
}
try this
Typekit explains on there site how to install a font. Login, goto the kit editor and click [ embed code]
<script src="//use.typekit.net/YOUR_CODE_GOES_HERE.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
After you've done that:
If you want to use Typekit in your CSS, click the “Using fonts in
CSS” link in the selectors area of your kit to reveal the appropriate
font-family names to use. Once you’ve included the Typekit embed code
in the of your documents, you can add these font-family names
to the CSS rules in your own stylesheet:
h1 { font-family: "proxima-nova", sans-serif; }
http://help.typekit.com/customer/portal/articles/6859-working-with-css-selectors
Using the font-family Names in Your CSS