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.
Related
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.
I'm doing a small project using react, where I needed navbar, so I copied the navbar code from flowbite(that uses Tailwind CSS), I've changed all necessary things need to change for react but still it's not working for small devices. The link is given below:
Tailwind Navbar
I think it's your browser issue. If you are using Google Chrome, then change your browser to Firefox. Unfortunately, the JS script file of Flowbite is not working on Google Chrome. Checking that navbar on other browsers may solve the problem.
I have a new install of DNN 9.8.1 and have installed 2sxc 11.11.04. I am trying to create Tailwind "tlw1" editions of the content-templates but was having issues where the BS4 templates were loading even though the tailwind theme I am using has a koi.json file defining "tlw1" as the default css framework.
Thinking I had configured something wrong, I setup a test. I added the content layout with the image|text view to a page with the Xcillion theme. I then added this remark #* Bootstrap 4 Template *# to the top of the BS4 template (added directly to the file using vs code) to make it easy to identify. Seeing Xcillion uses BS3, when I go to edit the template file, I expect the template from the ../BS3/Content folder to load. The editor however is loading the BS4 template from ../Content, not the BS3 template.
Do I not understand how koi is supposed to work, or is there possibly an issue with the koi implementation?
I figured it out. If you use the Edit Template button in the 2sxc content module, the 2sxc editor opens in a new tab and always loads the BS4 template, even though your theme is using BS3 or other framework. If you navigate to the BS3 folder (or other framework folder) through the file system, and edit the files directly with a code editor such as VS Code, the changes you make are displayed correctly as expected.
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.