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.
Related
I've implemented a custom font for CKEditor and although it is showing in the dropdown list it does not apply to the element. I cannot find the cause of why my CSS file isn't loading which is the cause of not applying the new font.
So, on my configuration default.js file I added the below lines of code:
config.font_names = 'Belluga Solid/Belluga_Solid;' + config.font_names;
config.contentsCss = "../fonts.css";
And then created a new fonts.css file:
#font-face {
font-family: "Belluga Solid";
src: local("Belluga Solid"), url("/MyFonts/Beluga/Belluga_Solid.eot") format("embedded-opentype"); /*non-IE*/
src: url("/MyFonts//Beluga/Belluga_Solid.ttf") format("truetype"); /*non-IE*/
src: url("/MyFonts//Beluga/Belluga_Solid.svg") format("svg"); /*non-IE*/
}
Looking at the source code, it correctly applies fine:
<p><span style="font-family:belluga_solid;">Lorem Ipsum</span></p>
It seems pretty straightforward to do. Looking at this tutorial the author got it all right: https://www.youtube.com/watch?v=knkFOuKPsKQ
I implemented the same solution but having a hard time figuring out how to solve the issue.
It's probably because the value of the font-family property in the element's styling doesn't match the value defined in the #font-face rule. The #font-face rule defined it as Belluga Solid, but your inline style sets the value to belluga_solid.
You can try modifying the #font-face rule so that it says this instead:
#font-face {
font-family: "belluga_solid";
}
That way, they will match and your font should hopefully display correctly.
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 created a project using Vue 2 with the webpack template. In the meantime I'm also working on a "component library" that I'm using locally in the project above (using npm link).
I'm using Stylus in both projects.
Now in App.vue, to be able to customize the appearance of the library, I'm importing the separate stylus files from the linked package like this:
<template>
<...>
</template>
<script>
...
</script>
<style lang="stylus">
#import "~snue/src/stylus/vars"
/*
Override default variables
*/
fontSans = "Ubuntu"
fontMono = "Ubuntu Mono"
fontNumber = "Dosis"
lighter = lighten(light, 5)
lightish = darken(light, 5)
darker = darken(dark, 5)
darkish = lighten(dark, 5)
primary = crimson
secondary = darkcyan
// Import components and style
#import "~snue/src/stylus/components"
#import "~snue/src/stylus/styles"
// Custom styles
#import url("https://fonts.googleapis.com/css?family=Dosis:400,700");
.f-number
font-family: fontNumber, Courier New, Courier, monospace
body
html
margin: 0
padding: 0
html
background-color: darkish
body
background-color: dark
color: light
</style>
Everything works fine, except for the fact that #import url(...) rules with google fonts don't seem to work.
When I run npm run dev the browser uses the fallback fonts I specified and I cannot see any request made in the network panel of the chrome inspector.
When I build the library with webpack and the extract plugin instead, I can clearly see the #import url() rules in the generated css file.
Has this something to do with some Vue setting?
It turns out the problem was postcss-import complaining about #import rules:
#import must precede all other statements (besides #charset)
I reverted back to version 7.* and now it's working fine. If you cannot switch to an older version below is a workaround that initially worked for me.
Workaround for postccs-import > 11.*
It's not a real solution, but I found a way to avoid this problem: I wrapped #import inside a #css rule, and now it works:
// Custom styles
#css
#import url("https://fonts.googleapis.com/css?family=Dosis:400,700");
To my surprise, I can even use stylus variables inside the #css literal block:
// Custom styles
fontNumberSource = replace(" ", "\+", fontNumber)
#css
#import url("https://fonts.googleapis.com/css?family="+fontNumberSource+":400,700");
So I'm ok with this for now
I would like to apply
font-family: Helvetica to all element in the site.
So I write
body, html {
font-family: Helvetica !important;
}
in the CSS file, the problem is , the font-family is still override by other inner CSS. How to force the whole site use one font family?
Thanks a lot for helping.
Is it being overriden by other css style rules with !important? If so, there is nothing to do as more specific selectors win over more general ones.
* {
font-family: Helvetica !important;
}
You could use the inspector in chrome, or other browser's equivalent to see how the cascade styles on your particular element unfolds. Your inner CSS could have also defined the !important flag, which overrides you definition on body.
If you post your entire html and CSS people might be able to help more easily.
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