When using the following Polymer component:
<paper-textarea value="test"></paper-textarea>
I did not find any way to change its font to a fixed font. (for code entry)
I tried the following styling, but just the color was actually applied:
<style is="custom-style">
:root {
--paper-input-container-input-color: blue;
/* the following lines do not work... */
--paper-input-font-family: monospace;
--iron-autogrow-textarea: {
font-family: monospace;
};
}
</style>
Any one knows how to do that?
paper-textarea uses iron-autogrow-textarea.
This should work (not tried myself)
<style is="custom-style">
:root {
--iron-autogrow-textarea: {
font-family: monospace !important;
};
}
</style>
You don't actually need to use !important. This will work in Polymer 2.0:
paper-textarea {
--iron-autogrow-textarea: {
font-family: monospace;
};
}
Related
After applying the below codes, the font awesome icons show up as squares. If I apply it to body tag. It doens't overwrite all font-family, so I had to apply it to *. How can I fix this error?
<style>
* {
font-family: "Open Sans", sans-serif !important;
}
</style>
This is because font awesome requires the FontAwesome font-family to be applied to icon elements, in order to source and render the icons correctly.
Your styles are likely overwriting this FontAwesome behaviour.
One way to fix this would be to ensure font awesome's .fas class still correctly applies the required FontAwesome font to .fas elements. You could do this by updating your CSS:
<style>
* {
font-family: "Open Sans", sans-serif;
}
.fas {
font-family:FontAwesome;
}
</style>
Or, if your browser supports the :not CSS3 selector:
<style>
*:not(.fas) {
font-family: "Open Sans", sans-serif;
}
</style>
If you are using Font Awesome 5 You can use this
.fab
{
font-family: 'Font Awesome 5 Brands' !important;
}
.fas, .far, .fa
{
font-family: 'Font Awesome 5 Free' !important;
}
I am working on a generic polymer 2.0 login page application, and I'm trying to use a custom font for a title bar.
In my login-page.html, I have this for the custom style:
<custom-style>
<style is="custom-style">
body {
margin: 0;
}
app-toolbar {
background-color: #4F1585;
font-family: 'Roboto', Helvetica, sans-serif;
color: white;
--app-toolbar-font-size: 24px;
}
#maintitle{
color: red;
font-family: 'font-regular';
}
</style>
</custom-style>
And my header/toolbar:
<app-header fixed condenses effects="waterfall">
<app-toolbar>
<img src="../icons/app-icon.png" style="height:100%;"/>
<div main-title id="maintitle">Login Page</div>
</app-toolbar>
</app-header>
And I import the ttf file like this:
<link rel="stylesheet" href="../fonts/font-regular.ttf" type="css">
This code turns the text red, but it doesn't apply the font. In contrary, it switches to Times new roman. I'm brand new to polymer, is there something I'm missing?
You can use #font-face to import your font.
UPDATE:
You need to use an external document for the #font-face import and not place it in the custom element template. Some at-rules in the shadow root are ignored in Chrome, see discussion. While it's not an issue when using Polymer 1, Polymer 2 seems to follow the browser behavior in this respect.
I would suggest to have a css stylesheet with the #font-face import:
#font-face {
font-family: "font-regular";
src: url("./font-regular.ttf") format("truetype");
}
If you import that in your index.html, "font-regular" will be available globally. Alternatively, you can import the stylesheet only in your custom element.
To import font to polymer use link href then apply the font
example
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic" crossorigin="anonymous">
html, body {
font-family:'Fira Sans', sans-serif;
}
you can also override --paper-font-common-base font
html, body {
font-family:'Fira Sans', sans-serif;
--paper-font-common-base: {font-family:'Fira Sans', sans-serif;}
}
My CSS specifies font-family: inherit for a button but why is that. I thought with CSS that if you don't specify it will inherit anyway?
In common browsers, button defaults to a sans-serif font. Specifying font-family: inherit overrides that browser default.
Perhaps to override a different setting from a less-specific selector?
* {
font-family: Comic Sans;
}
div {
font-family: Verdana;
}
button {
font-family: inherit; /* look like my parent */
}
<div><button ...></div>
What is the best way to change Polymer Paper Elements default font from Roboto to a custom font?
I used the --paper-font-common-base: {} mixin to define my font and this works in most places... but not all. In places like the paper-toolbar for example there is still Roboto applied.
Is there another way to do this?
EDIT
I see the offender now. Inside paper-styles/typography.html there are loads of mixins that specifically define the font... eg
--paper-font-title: {
/* #apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* #apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
/* #apply(--paper-font-common-nowrap); */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 20px;
font-weight: 500;
line-height: 28px;
};
Why are the #apply blocks here commented out? If these weren't commented by default it looks like this wouldn't be a problem. But now I have to go and override every mixin!
EDIT 2
I see there is a note at the top of the typography.html file
/*
Unfortunately, we can't use nested rules
See https://github.com/Polymer/polymer/issues/1399
*/
But this doesn't seem to be true, in Chrome anyway. If I uncomment the #apply(--paper-font-common-base) lines in all the mixins it seems to work. Is this a browser issue?
Overriding the --paper-font-common-base mixin is the correct approach.
The following CSS code should work.
:root {
--paper-font-common-base: {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
};
}
I was unable to find the issue you pointed out, it probably was fixed already. When inspecting the following files, the --paper-font-common-base is being applied as expected.
https://github.com/PolymerElements/paper-styles/blob/master/typography.html
https://github.com/PolymerElements/paper-toolbar/blob/master/paper-toolbar.html
Is it possible to create a selector that would identify elements with specific HTML font-weight properties?
Something like (fake example):
div[font-weight^='900']{
font-family:"HaasGrotDisp55Roman";
}
div[font-weight^='500']{
font-family:"HaasGrotDisp35Thin";
}
w/ font-face css definitions as:
#font-face {
font-family: 'HaasGrotDisp35Thin';
src: url('fonts/neuehaasgrotdisp-35thin.eot');
}
#font-face {
font-family: 'HaasGrotDisp55Roman';
src: url('fonts/neuehaasgrotdisp-55roman.eot');
}
You could do the following:
/* Your fonts */
#font-face {
font-family: 'HaasGrotDisp';
src: url('fonts/neuehaasgrotdisp-35thin.eot');
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: 'HaasGrotDisp';
src: url('fonts/neuehaasgrotdisp-55roman.eot');
font-weight: 900;
font-style: normal;
}
body { font-family: "HaasGrotDisp" }
h1,h2,h3 { font-weight: 900 }
This minifies it to only one font-family. Simply assign the different weights inside your #font-faces
And as for your attribute like query: I would suggest using semantic classes to use it with divs.
Nope. Add classes to elements so that you can apply certain font-weight's to those elements. Use those same classes for to "identify" elements that have a certain font-weight. That's how CSS works.
as far as I know, css selector will work on element name or attributes, but not css. besides, even if it were possible, it would be strongly discouraged to do so. instead you can define class for each font face, and apply class to approriate div's, and search div's with those classes.
eg)
`
.Haas {
font-family: '...';
}
.Neue {
font-family: '...';
}
...
<div class="some_class Haas">....
`