Installing Google Material icons using Setup Method 2 self hosting for our React project the ligatures associated with the icon is sometimes displayed before the material icon.
<i class="material-icons">face</i> {/* shows text "face" on site prior to proper material icon load */}
For example the above line would display "face" for a second before showing a face. How can we delay the UI rendering until the file references are fully loaded?
/*material icons file references loaded locally */
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'), local('MaterialIcons-Regular'), url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'), url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}
Create a file called preload.js in your src folder.
document.fonts.load('10pt "Material Icons"').then(function () {
console.log('Material Icons font has been preloaded.');
});
add the following script tag at the end of the head section in index.html
<script defer src="%PUBLIC_URL%/preload.js"></script>
user in your React component like this
import Icon from '#material-ui/core/Icon';
function MyComponent() {
return <Icon>home</Icon>;
}
I hope it's working
Answer from How to prevent material icon text from showing up when Google's JS fails to convert them?:
you can use font-display: block;, just add this CSS to your HTML head:
<style>
#font-face {
font-family: 'Material Icons';
font-display: block;
}
</style>
for more information font-display
Related
I am using the #draft-js-plugins/image to display image in my react application. It is working but I can't seem to understand how to style the plugin so as the style my images that are displayed. I read through the documentation and I read that:
The plugin ships with a default styling available at this location in the installed package: node_modules/#draft-js-plugins/image/lib/plugin.css
When I checked this location, the plugin.css is empty. How do I apply style to the images that are displayed by the plugin? My images are covering the entire page.
You can target the images inside the draft.js editor on your component stylesheet. Here is an example screenshot using scss:
Screenshot: targeting draft.js editor using scss
Here is the code block
.DraftEditor-root {
figure {
margin-block-start: .5em;
margin-block-end: .5em;
margin-inline-start: 0;
margin-inline-end: 0;
}
img {
width: 100%;
// height: 200px;
object-fit: cover;
}
}
I am using react bootstrap Carousel in my react js code. I am successfully able to customize react bootstrap Carousel indicators. By using below code..
div.crausal ol li{
height: 0.3em;
width: 4em;
background-color: #E77728 !important;
}
But I am not able to change the color of active class for indicator. I have tried this
div.crausal ol li.active{
background-color: blue !important;
}
But it does not work.
This is my carousel class.
<Carousel className={css_class.crausal} touch={true} controls={false}>
// Carousel items goes here //
</Carousel>
I want to change the color of active class indicator.
If someone can give better carousel option other than react bootstrap to solve this issue that will also do
I found a kind of fix after researching longer. What you can do is add normal bootstrap file in your project, import it in your component file and now react bootstrap classes are overridden by this normal bootstrap import. After that you can customize the normal bootstrap file downloaded in your project (bootstrap.min.css). But this is just a fix.
What you can do is:
div.carousel-indicators .active{
background-color: #E77728 !important;
}
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 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
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