Is the MDC typography specific to the Roboto font, or can we implement with other Google fonts and if so, is the recommended way simply to apply the font-family CSS to body?
Lastly, it appears that all header elements are tied to the <h1> element which seems to break the semantic nature of HTML5, i.e. h1 normally has higher significance than h5.
MDC-Web is a customizable library, and given the fact that Google doesn't prohibit using your brand styles along with Material Design framework, you're free to use any font, not just "Roboto".
If you're using CSS-only approach, adding font-family to body is not enough: MDC-Web applies default typography styles (including font-family) to different components (e.g., mdc-button, mdc-list, mdc-card) and typography classes, and they still will have “Roboto” font applied. So, if you’re going to use such MDC-Web components and classes, you need to manually specify font-family for each of them:
.mdc-button {
font-family: "Open Sans", sans-serif;
}
.mdc-list {
font-family: "Open Sans", sans-serif;
}
.mdc-card__supporting-text {
font-family: “Open Sans”, sans-serif;
}
But this might be tedious, so the recommended way to generate MDC-Web styling is to use Sass. Specifically, you need to override MDC-Web’s typography variable in your .scss file before importing the component:
$mdc-typography-font-family: "Open Sans", sans-serif;
#import "#material/typography/mdc-typography";
Another method is described in the MDCv2 developer documentation:
#use "#material/typography" with (
$font-family: unquote("Arial, Helvetica, sans-serif")
);
This method leverages Sass module variables.
If you don't want to use SASS, you can do some basic customisation by setting variables in your css. For example:
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="/assets/css/site.css" />
site.css
:root {
--mdc-typography-font-family: 'Nunito Sans', sans-serif;
}
body {
font-family: var(--mdc-typography-font-family);
}
You can also override the default theme colours using variables like this:
--mdc-theme-primary: #0d46a0;
More info can be found here: https://material.io/develop/web/docs/theming
Related
I am trying to use a locally hosted font in a React project that utilizes Emotion, and its Global component. This method works great for web fonts, like Google Fonts, but when I downloaded that same font and tried to apply it as a local .ttf file using #font-face, I couldn't achieve the same result.
Here's the important file, App.js:
import React from "react";
import { Global, css } from "#emotion/core";
import styled from "#emotion/styled";
const GlobalStyles = css`
#import url("https://fonts.googleapis.com/css?family=Dancing+Script&display=swap");
#font-face {
font-family: "Local Font";
src: url("fonts/DancingScript-Regular.ttf");
}
* {
text-align: center;
}
`;
const FromGoogle = styled.h1`
font-family: "Dancing Script";
`;
const FromLocal = styled.h1`
font-family: "Local Font";
`;
function App() {
return (
<div className="App">
<Global styles={GlobalStyles} />
<FromGoogle>This text's font family is from Google.</FromGoogle>
<FromLocal>
This text's font family should be the same, except it comes from a local
font file, and it's not working.
</FromLocal>
</div>
);
}
export default App;
For some reason, the text in FromGoogle uses the Google font fine, while the text from FromLocal doesn't. My first thought was that it's an issue with the path, but if it is, I couldn't tell.
Here's the full project on GitHub. I used Create React App, and removed all the irrelevant boilerplate.
In my Next.js app I am using emotion with these versions:
"#emotion/react": "^11.1.1",
"#emotion/styled": "^11.0.0",
My global styles are:
export const GlobalStyles = () => (
<Global
styles={css`
#font-face {
font-family: 'Faustina';
font-style: normal;
font-weight: 700;
src: local(''),
url('/fonts/Faustina/Faustina.woff') format('woff'),
url('/fonts/Faustina/Faustina.ttf') format('truetype');
}
* {
box-sizing: border-box;
font-family: Faustina;
}
html,
body {
width: 100%;
height: 100%;
min-height: 100%;
padding: 0;
margin: 0;
}
`}
/>
);
My fonts are in
project_root/public/fonts/Faustina
// explicitly
project_root/public/fonts/Faustina/Faustina-Bold.ttf
project_root/public/fonts/Faustina/Faustina-Bold.woff
In order to see font changes, I needed to restart dev server, e.g. yarn dev. Before restarting I had same issue where fonts weren't displayed (even downloaded in dev tools Network tab).
am using these versions in my gatsby project;
"#emotion/react": "^11.8.1",
"gatsby": "^4.8.0"
index.html file is not available so you can't add <style> html tag and embed #font-face inside it.
Host your downloaded fonts inside your src/myfonts directory then import any of your fonts using the static import statement.
import font1 from './myfonts/font1.ttf';
then call url(font1) css function with the font1
const globalStyle = css`
#font-face {
font-family: 'font1';
src: url(${font1}) format('truetype');
};
`;
it worked in my case;
In my case, the solution was as in this answer.
I needed to define the fonts in a css file that is imported into the index.html like so:
<link rel="stylesheet" type="text/css" href="/styles/fonts.css" />
I was then able to reference the font family names in my emotion theme and have them load correctly.
Is there a way to use styled-components together with react-bootstrap? react-bootstrap exposes bsClassproperties instead of className for their component which seems to be incompatible with styled-components.
Any experiences?
You can extend the style keeping the original styles of the component from bootstrap. You will find more documentation on using third party libraries like react bootstrap with styled-components here.
const StyledButton = styled(Button)`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
Here is a sandbox for reference: https://codesandbox.io/s/2vpm40qk90
I'd like to offer a better alternative and approach.
I have been using react-bootstrap before and we have found that the current implementation was not porting bootstrap into react entirely and we still needed to rely on external files such as CSS/Fonts which is not styled-components philosophy and best practice.
Considering styled-components offer the css interface, we ported bootstrap 4 with best ES6 practices in a project called bootstrap-styled.
This Twitter Bootstrap v4 implementation of bootstrap is fully implemented for styled-components without a once of CSS or extra files.
This gives several benefits starting with a full js api, theming, modularity and reusability.
To override styles, it can be done through the <ThemeProvider /> or using props.theme on any component. We also export a <BootstrapProvider /> component that include <ThemeProvider /> and provide bootstrap class utilities such as .d-none, etc... in it's scope.
You can see a demo here
I've been trying to use styled-components with the alpha version of material-ui
According to the documentation, this should work out of the box.
This code:
const StyledButton = styled(Button)`
color: red;
text-transform: uppercase;
`;
return <StyledButton>Button</StyledButton>;
will generate something like this:
<button tabindex="0" class="MuiButtonBase-root-3177716317 sc-bdVaJa sxRGN" type="button" role="button">
...
</button>
It looks good.
However, the only problem I have is the order of the injected CSS styles (pic). Styles from styled-components are injected before MUI's styles which make their priority lower.
Is there any way to solve this without using !important?
In the current release (i.e. non-alpha) version, what you've asked would indeed require !important basis:
"Note that CSS properties defined inline are given priority over those defined in a CSS class. You need to use !important to take precedence over the inline style."
Ref: http://www.material-ui.com/#/customization/styles
Perhaps the alpha hasn't quite moved away from this inline requirement yet or it is still a work-in-progress.
What I've done to overcome this sort of thing myself is to (unfortunately) recreate the entire CSS on a standard <button> element when I need such a solution. Here's an example of how I'm doing that with a react-photonkit "theme"
// #flow
import styled from 'styled-components';
const PhotonStyledButton = styled.button`
font-family: Arial, Roboto, Helvetica, sans-serif;
height: 30px;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 12px !important;
line-height: 1.4;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: default;
background-image: none;
border: 1px solid transparent;
border-radius: $default-border-radius;
box-shadow: 0 1px 1px rgba(0,0,0,.06);
-webkit-app-region: no-drag;
&:focus {
outline: none;
box-shadow: none;
}
color: #333;
border-top-color: #c2c0c2;
border-right-color: #c2c0c2;
border-bottom-color: #a19fa1;
border-left-color: #c2c0c2;
background-color: #fcfcfc;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#f1f1f1));
background-image: -webkit-linear-gradient(top, #fcfcfc 0%, #f1f1f1 100%);
background-image: linear-gradient(to bottom, #fcfcfc 0%, #f1f1f1 100%);
&:active {
background-color: #ddd;
background-image: none;
}
`;
export default PhotonStyledButton;
styled-components in general is compatible with any component library. When you write styled(AnotherComponent) we take that component and inject an automatically generated class name. This means essentially it's the same thing as writing <AnotherComponent className="sc-asdf123" />!
The current version of material-ui specifically is a bit difficult to custom style because it uses inline styles. From the MaterialUI documentation:
Note that CSS properties defined inline are given priority over those defined in a CSS class. You need to use !important to take precedence over the inline style.
This means simply using styled(MaterialButton) won't work as the passed-in styles will mostly just be ignored. You need to bump the specificity of your styles to override the inline styles that material-ui ships with. (this article is a great primer on specificity if you're not familiar with the details)
Answer for the alpha version of material-ui
The current alpha version of material-ui has switched to using JSS under the hood. (which is CSS in JS not inline styles, like styled-components) This means the issue is likely to be that the styled-components styles are injected after the default material-ui styles. (which are injected by JSS)
JSS supports custom injection points so you might be able to add a <!-- jss --> comment to the HEAD of your HTML to make sure JSS injects its CSS before the styled-components injected CSS?
Answer for the current version of material-ui
There are two ways to bump the specificity of the styled-components injected styles, one more tedious and one a bit more "hacky". The first one is adding !important at the end of all of your styles:
const Button = styled(MaterialButton)`
color: blue!important;
`
While this works in most cases it gets tedious very fast when you have lots of custom styling in a component. The better way is to use the class name hack:
const Button = styled(MaterialButton)`
&&& {
color: blue;
}
`
These ampersands get replaced with the automatically generated class name meaning the outputted CSS looks something like this:
.sc-asdf123.sc-asdf123.sc-asdf123 {
color: blue;
}
This bumps specificity by a big margin, thusly overriding the defined inline styles, and is less annoying than having to put !important after each rule.
Now we can use <!-- material-ui --> to make sure the styles are injected after it.
By default, Material-UI will look for a html comment named to inject styles after. By adjusting the placement of this comment within your HTML body you can control the order that CSS rules are applied to your components. (ref)
I can't seem to find any documentation regarding using a different font in Angular Materials. Is this possible through the framework?
This is the official documentation on the subject, but it doesn't specify how to provide backup family classes if a font can't load:
https://material.angular.io/guide/typography
#import '~#angular/material/theming';
// Define a custom typography config that overrides the font-family as well as the
// `headlines` and `body-1` levels.
$custom-typography: mat-typography-config(
$font-family: monospace,
$headline: mat-typography-level(32px, 48px, 700),
$body-1: mat-typography-level(16px, 24px, 500)
);
// Override typography for all Angular Material, including mat-base-typography and all components.
#include angular-material-typography($custom-typography);
Edit; for backup font-families (notice the quoting):
$font-family: '"Sintony", Arial, sans-serif'
Edit; if you had a custom font in /assets
#font-face {
font-family: 'MyWebFont';
src: url('/assets/webfont.eot');
}
$font-family: '"MyWebFont", Arial, sans-serif'
Angular Material is implementation of Material Design and Material Design is strongly linked to Roboto font and as you mentioned, there is nothing about it in the documentation, so I think it is not possible to do that through the framework.
But you can easily change font family in css file, which needs to be included in your build after your Angular Material dependencies. Here's an example:
body {
font-family: "Comic Sans MS";
}
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
And Demo: http://codepen.io/mattdanna/pen/pgwVzX
Borrowed from here: https://github.com/angular/material/issues/6561#issuecomment-170837189
I am using angular.js to build a SPA and angular-material to for the designing the layout. But turns out that angular material icons are not CSS styleable but polymer's icons are. So I want to use polymer icons inside my angular.js app.. I've included polymer.js in my scripts and import core-icons.html but there is an error..
Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'.
Uncaught TypeError: Cannot read property 'resolveDom' of undefined
How can I use polymer icons inside my angular.js app..??
Angular does not understand ShadowDOM that Polymer makes extensive use of. So when Angular parses and compiles the HTML it does not know what to do which custom elements so it throws an error.
But from Polymer 0.8 this might change and might be compatible with Angular.
One more thing I notices in your Question was that, you added polymer.js instead of webcomponents.js. polymer.js is the Polymer Library which is used in making new elements and interacting with them, where are webcomponents.js is the polyfill for Web components themselves.
I've used polymer icons in an angular project using material angular. In my case I wanted to use the polymer paper-icon-button element as well but I've also done it with just a core-icon element.
I did not need to include polymer.js, just:
polymer.html, core-icon.html, core-icons.html
I used a paper-icon-button so I also included
paper-icon-button.html
and I used am icon from the social set so I included core-icons/social-icons.html as well
for just a core-icon (i had it in a button but i don't think it's necessary)
<button ng-click="toggleLeft()" class="rp-menu-button">
<core-icon icon="menu></core-icon>
</button>
The CSS (LESS):
.rp-menu-button {
background: none;
border: none;
.rp-menu-icon;
}
.rp-menu-icon {
width: 48px;
height: 48px;
color: #toolbar-font-color;
}
Or for a paper-icon-button:
<paper-icon-button class="rp-card-paper-icon" id="share" icon="social:share">
The CSS (LESS):
.rp-card-paper-icon {
text-align: center;
color: #inactive-icon;
&:hover {
color: #active-icon;
}
}
.rp-card-paper-icon::shadow core-icon {
width: 18px;
height: 18px;
}
.rp-card-paper-icon::shadow #ripple {
width: 33px;
height: 33px;
}
.rp-card-paper-icon#share::shadow #ripple {
color: green;
}
So You set the color in the class and the size of the icon in .[class]::shadow core-icon and you can use
.rp-card-paper-icon::shadow #ripple
to style to ripple effect (if you are using a paper-icon-button)