I can see from the Material UI documentation that the user is responsible for loading the Roboto font :
Material UI is designed to use the Roboto font by default. You may add it to your project with npm or yarn via Fontsource, or with the Google Fonts CDN.
The Roboto font will not be automatically loaded by MUI. You are responsible for loading any fonts used in your application.
I tried one of their example projects (the vitejs one). I can't see any loading of the Roboto font in this project.
When starting it using npm run dev, I can see the text is correctly displayed with the Roboto font despite the fact that I can't see any trace of this font in the index html page.
I didn't see any <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/> in the header. I also tried to find any #font-face in the inline styles without any success.
I'm wondering where does the Roboto font come from ? Is it included by default in modern computers (I'm currently using firefox on a ubuntu laptop) ?
TL;DR
No -- you do need to install the Roboto font to use MUI, since it is configured with fallbacks (and you can override the Roboto usage globally), but if you want to conform to the used version of Google's Material Design guidelines or have a more consistent cross-platform UI, you may want to.
What you're most likely seeing is the fallback font (your system's version of Helvetica or another sans serif font, if Roboto is not installed locally). They do look somewhat similar, but upon closer inspection of the subtleties, you can see that the fonts differ. (Rounding, spacing, etc.)
CodeSandbox - MUI with Roboto loaded
CodeSandbox - MUI without Roboto loaded
Pre-installed OSes
As far as I'm aware, Android is the only OS where Roboto is a pre-installed font.
Not installed by default:
MacOS Monterey Font List
Windows 11 Font list
(I couldn't reasonably find a list of Ubuntu pre-installed fonts)
Confirming on Firefox
On Firefox the rendered (used) font can be seen by inspecting an element, then viewing the "Fonts Used" section of the "Fonts" panel.
Confirming on Chrome
On Chrome the rendered (used) font can be seen by inspecting an element, then viewing the "Rendered Fonts" section of the "Computed" tab.
Fun side note -- Firefox used to have quite a few font loading/rendering problems which is why I still have trust issues using Firefox for dev.
Related
Question
How to quickly test different fonts in a React project?
Overview
I'm learning how to use React/Gatsby with this template. In this example the site uses .sass files for styling and I see font-family: "slick" is referenced in the slider.sass file and reset.sass file has this entry:
body
font-family: Roboto, Helvetica, Arial, sans-serif
font-size: 16px
Desired outcome
I would ideally like to experiment as quickly as possible with lots of different combinations of fonts in this and other projects.
For example, I would like to try changing all fonts to something like this for titles/headers and this for everything else.
What have I looked at?
I've seen this from Gatsby founder kyleamathews but my guess is that it would clash with current sass configuration in this example.
I also see that variables can be used with sass and could potentially be used for testing different fonts in this project but I'm not sure exactly how.
Thanks for any help showing how I should approach this.
Let me kick my answer off with a warning:
Disclaimer: I do not recommend doing this in production. This is intended for testing font pairings locally.
Once you have chosen your fonts, I suggest hosting webfonts on your domain to avoid hitting a remote CDN. You could use classic #font-face declarations, or Kyle Matthew's typefaces packages, for example.
Now, what you basically want to do is to import fonts client-side, to make it easy to try them out without rebuilding your site.
1. Get a link to embed your fonts client-side
First, you'll need to get an embed link from your font hosting CDN (in your case, from Google Fonts). It will look like this:
https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat
2. Embed the fonts on your Gatsby site
To embed the link on your Gatsby site, you have two choices:
using <link>
You can add a font to your Gatsby app as an external client-side package. You would typically either customize html.js, or use react-helmet.
In your case, I see here that react-helmet already built into the starter you're using, so you would need to update layout.js like this:
<HelmetDatoCms
favicon={data.datoCmsSite.faviconMetaTags}
seo={data.datoCmsHome.seoMetaTags}
>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap" rel="stylesheet">
</HelmetDatoCms>
Check out the README of gatsby-source-datocms to read more about the HelmetDatoCms component
using #import
You can import a remote font in CSS (or SASS):
#import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap');
This is already being used in your starter, the import is in reset.sass. You would simply need to update the URL with one that includes the fonts you want to try out.
In your case, I would recommend the second option. You'll only need to edit a single file, which will make testing several fonts faster.
3. Use the fonts in your CSS
Third, no matter if you chose the <link> or the #import option, you'll need to update your CSS to use the fonts you've imported. As you mentioned already in your question, this is where is happens.
You'll want something like this:
body {
font-family: 'Montserrat', sans-serif;
}
h1, h2, h3 {
font-family: 'Great Vibes', cursive;
}
I have searched for Browser support for Semantic UI react and I have found that Semantic UI (not react version) to support the following version
Browser Support :Last 2 Versions FF, Chrome, Safari Mac IE 11+ Android 4.4+, Chrome for Android 44+ iOS Safari 7+ Microsoft Edge 12+ Although some components will work in IE9, grids and other flexbox components are not supported by IE9 and may not appear correctly.
Is it safe to assume that semantic-ui react also follows the same minimum browser support? I could not find that info in their GitHub page or website.
From the Semantic UI React docs:
Can I use a custom CSS theme?
Yes. Semantic UI React includes components that render valid Semantic UI HTML, no CSS is included. This allows you to load any Semantic UI CSS theme on top of your Semantic UI React app.
Since you have to include your own CSS, you can pull those files from the official Semantic UI distribution and have their version support assurances.
Browser: My application renders as IE7 Mode(Document Mode)
I have a similar requirement as Deka87 had for Use font awesome icon as css content. Now, when I implement the solution given by Mr. Alien I get a weired problem.
CSS Class:
.listing th.sort-col-d{
font-family: FontAwesome;
content: "\f0dd";
}
This when rendered in browser, makes the content=" ". Screenshot
When I check my network tab then the font awesome request is successful and I can see the Response Body. It even changes the font for the th element.
I am not sure what could be the issue?
Quoted from the font-awesome website: http://fortawesome.github.io/Font-Awesome/get-started/
If you need IE7 support, you have my condolences. Really. Font Awesome
4.4.0 doesn't support IE7, but an older version does. You'll need to check out the 3.2.1 instructions for using IE7. Then go complain to
whomever decided your project needs IE7 support.
I have got extjs 5 which contains many folders (.sencha, build, cmd, examples, licences, overrides, packages, plugins, src, and welcome). I want to use charts in a web application, so what I did is that I copy/paste ext-all-debug.js file that was in the build folder. This gave me the possibility to display a panel, but there was no css. So I copy/paste the css files that I found in \ext-5.1.0\build\packages\ext-theme-neptune\build\resources. So the panel is displaying fine with css.
Then I want to use charts, but, for a reason I don't understand, charts are not included in ext-all-debug.js file. So I copy/paste "ext-charts-debug.js". And now I'm able to display simple cartesian charts (others do not work), but their behaviour is not normal (wrong axis, legend always in bottom when it locked it right or left, etc.). The code I wrote to display the chart has been tested on sencha fiddle and is working perfectly.
So my question is: What should I inlcude in my web application lib folder to let me use EVERY sencha components (with css). Thanks a lot !
PS: Here is my current web application lib folder:
For ExtJS 5 you really should read the documentation on Sencha Command, it's by far the easiest way to get your project running.
If you really want to manually add the files, copy the build folder from the ExtJS Framework to your project's folder and then add this to your index.html:
<link rel="stylesheet" href="build/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" />
<link rel="stylesheet" href="build/packages/sencha-charts/build/crisp/resources/sencha-charts-all.css" />
<script src="build/ext-all-debug.js"></script>
<script src="build/packages/sencha-charts/build/sencha-charts.js"></script>
Your Sencha Charts are not being displayed correctly because you forgot to add the css for your sencha charts theme.
PS: Really, really read the docs on Sencha Command.
I've just migrated my Drupal 7 live site to a fresh dev site and the default theme is only partially loading. Database, code, and files are fresh copies. Everything (content, links, etc) is good except for the theme.
The theme is listed under Appearance and is correctly set to default. The theme's image loads on the Appearance page, the name and info are loaded from the subtheme's .info file, and the parent theme's css is loading (zurb_foundation).
But the subtheme's custom css, regions, and favicon as defined in the subtheme.info are not loading. It's odd, like half the theme is working and half is not.
Attempted fixes include rebuilding the theme registry, switching themes back and forth, drush cc all, checking directory permissions.
Any clues?
I don't know why it broke, but I know the fix now.
Duplicate the theme folder. Rename the theme's info file. Load this as a new theme. Problem solved.
The contents of the theme directory are exactly the same, but the new name allows it to load correctly.
I know this is an older post, but the same happened to me recently.
The Live-Server used a different PHP Version (5.3.X). Switching to PHP 5.4 solved the problem immediately.