I am trying to use a custom font on my client's course marketing page on Teachable.com. Right now the course is not currently live, so unfortunately I can't share a link to preview.
I am trying to follow the Google Webfonts pattern of attributes in the link tag:
<link rel="preconnect" href="https://tablocreative.com/roo/webfonts.css" crossorigin>
I am hosting this webfont and the respective font files on a different hosting provider (standard Apache hosting). When I view the source of my page, I can see that file is being referenced - no 404 errors or access origin errors in the console.
This is the CSS:
html, body, main, div, p { font-family: 'Avenir LT Pro'; }
I can see in the inspector that declaration is being applied, no other font-family is set or overriding this. But the webfont will not load.
Any insights or ideas would be appreciated!
Check out the codepen on the readme of this repo.
It has a working example:
https://github.com/adriano-tirloni/google-fonts-css2
Related
I'm learning about database doing a walk through to build a project. I don't have full knowledge about how the code works and I ended up having the following issue:
The project has 3 pages until now, and all use one Bulma file for the stylesheet. It is working for the first full pages, but on the third one the CSS is not loading with the page.
It appoints the following error on the browser console:
Refused to apply style from
'http://localhost:3000/checklists/stylesheets/bulma.min.css' because
its MIME type ('text/html') is not a supported stylesheet MIME type,
and strict MIME checking is enabled.
Going straight to the directory it gives:
Cannot GET /checklists/stylesheets/bulma.min.css
On the network tab it shows that X-Content-Type-Options = nosniff, and the Content-Type = text/html when it should be text/css.
Also, according to this site, it seems that the CSS file is not being found for some reason.
I've checked the link and it seems to be right and it also work properly on the other pages, and from what I understand about the subject, the rest of the code should be working as well.
<link rel="stylesheet" type="text/css" href="stylesheets/bulma.min.css" />
I checked the code and changed some stuff trying to solve, but nothing worked and I've reverted the changes.
Could someone help me to solve this issue?
You can check the files here.
For the the project it is being used:
MongoDB
Mongoose
Express
Path
EJS
Thanks in advance.
I am using Orchard v.1.9.1.0.
I have my custom theme with a layout page that starts off like this:
#using Orchard.UI.Resources;
#{
Script.Require("ShapesBase");
// css
Style.Include("//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css");
Style.Include("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css");
}
Using Script.Include, I thought loading the CDN reference would work, but when building the project and viewing it locally, the reference is not there and instead renders like this:
<link href="/Themes/HotToddy5K/Styles/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
Why does Orchard do this? I can't seem to find where in the base/core it's applying this. I tried to delete that bootstrap.min.css file in that "scripts" folder, hoping it would then fall back to my CDN reference, but no luck.
Any ideas?
You can easily do this on your ResourceManifest.cs.
Actually it is better, because you can provide fallbacks as for debugging files. you can manage this feature from the Settings section in the Admin.
Where is says "Resource Mode", in 1.9x you can trigger the CDN too.
I use Script/Style.Require instead of Include as it gives me more control. it also maintains your script/style dependencies.
I have a liferay service with many sites. Those sites has the same theme but each has different color scheme. How to set a theme to a /html/portal/status.jsp ( error page) of the current site ? I don't want to create an error page for each site and I don't want all the sites to have the same error page.
One way is override this JSP (using hook / ext) and create themeCSSPath using themeDisplay, as following:
themeCSSPath is the path of the main.css of the theme applied on current page.
CSS path
String themeCSSPath = themeDisplay.getPortalURL() +
themeDisplay.getPathThemeCss() + "/main.css";
CSS link
<link rel="stylesheet" type="text/css" href="<%=themeCSSPath %>" />
I don't want to create an error page for each site and I don't want
all the sites to have the same error page."
This doesn't make sense.
"/html/portal/status.jsp" is an external JSP page, not part of Portal/Site pages. So, Liferay theme plugin won't work here. You have to design the JSP pages similar to you have on Portal/Site pages.
I want to run a content script on an iframe with a chrome-extension:// URL. I added a line to my manifest.json that I copied out of the documentation http://code.google.com/chrome/extensions/match_patterns.html
chrome-extension://*/*
But when I reload my extension I get an alert:
Could not load extension from '/work/sirius/extension'.
Invalid value for 'content_scripts[2].matches[0]': Invalid scheme.
Any idea how to get this to worK?
No. Only ftp:, file:, http: and https: can be matched by a content script declaration.
Invalid URL patterns at any of the matches and exclude_matches fields are rejected (generating an error when trying to load the extension).
Invalid patterns at the permissions option in the manifest file are ignored.
If you want to run a script on a tab from your extension, use chrome.extension.getViews in your background script.
Even better, design your extension's pages such that they effectively communicate with each other (example).
I'm having the exact same problem, look at the API http://code.google.com/chrome/extensions/match_patterns.html it says clearly that they accept chrome-extension://*/* yet they don't.
They need to update the API so as not to confuse people.
It seems that Chrome authors have silently removed the ability for content scripts to be injected into chrome-extension: pages. Documentation still says that it works and even contains examples with chrome-extension: scheme but actually it doesn't work. So now only http:, https: and ftp: work "from the box" and file: can work if user of your extension has enabled this on Extensions (chrome://extensions/) page.
Update: now documentation referred above is updated and says nothing about ability to inject content scripts to chrome-extension: pages.
You can inject js to your iframe html(chrome-extension: pages) without declaring it in manifast.json. The injected js can visit Chrome APIs directly.
iframe.html:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
<script src="iframe.js"></script>
</html>
iframe.js:
console.log(chrome); // {loadTimes: ƒ, csi: ƒ, …}
I want to run a content script on an iframe with a chrome-extension:// URL. I added a line to my manifest.json that I copied out of the documentation http://code.google.com/chrome/extensions/match_patterns.html
chrome-extension://*/*
But when I reload my extension I get an alert:
Could not load extension from '/work/sirius/extension'.
Invalid value for 'content_scripts[2].matches[0]': Invalid scheme.
Any idea how to get this to worK?
No. Only ftp:, file:, http: and https: can be matched by a content script declaration.
Invalid URL patterns at any of the matches and exclude_matches fields are rejected (generating an error when trying to load the extension).
Invalid patterns at the permissions option in the manifest file are ignored.
If you want to run a script on a tab from your extension, use chrome.extension.getViews in your background script.
Even better, design your extension's pages such that they effectively communicate with each other (example).
I'm having the exact same problem, look at the API http://code.google.com/chrome/extensions/match_patterns.html it says clearly that they accept chrome-extension://*/* yet they don't.
They need to update the API so as not to confuse people.
It seems that Chrome authors have silently removed the ability for content scripts to be injected into chrome-extension: pages. Documentation still says that it works and even contains examples with chrome-extension: scheme but actually it doesn't work. So now only http:, https: and ftp: work "from the box" and file: can work if user of your extension has enabled this on Extensions (chrome://extensions/) page.
Update: now documentation referred above is updated and says nothing about ability to inject content scripts to chrome-extension: pages.
You can inject js to your iframe html(chrome-extension: pages) without declaring it in manifast.json. The injected js can visit Chrome APIs directly.
iframe.html:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
<script src="iframe.js"></script>
</html>
iframe.js:
console.log(chrome); // {loadTimes: ƒ, csi: ƒ, …}