So I am using a few custom .woff fonts by loading them in using #font-face and storing them within my src folder. When running the app locally my fonts all work, but after deploying the app to the live domain Chrome and Firefox do not load the fonts for desktop. They do however load on Safari (Desktop and Mobile), Chrome(Mobile), Firefox(Mobile). I am wondering why these fonts will not load on desktop versions of Chrome and Firefox. Do these browsers not read .woff fonts?
The issue was because I was hosting it on Github pages and using a custom domain created a CORS issue. I fixed this by moving my font files into the public folder and creating a CSS file in the public folder as well to load in the fonts.
Related
I have noticed that on local extension pages, Chrome will inject some styles of its own that are different on different operating systems. For example, here's the injected styles on Chrome Beta on Windows, for the uBlock origin dashboard (chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/dashboard.html#settings.html):
The images of the same page for Chrome Dev on Linux and Brave browser on macOS are linked.
Currently I am migrating my extension page from a local HTML to a website. Chrome does not inject these styles on the website, so it looks different than my local extension page.
Thus, I want to ask how I can find the full source of this injected stylesheet, so that I can manually implement those styles on my website page.
Font-family and size are injected in all extension pages: extension_fonts.css.
The font size differs from a usual html page, which may be a bug in Chromium.
A big extension.css is injected in a ManifestV2 extension options page declared with chrome_style key in manifest.json: "options_ui": {"chrome_style": true, "page": "options.html"}.
ManifestV3 doesn't allow it.
I have an application developed in .net MVC and using "SourceSansPro" font.
Imported google font into css as. This is first statement of css file
#import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
When I run this on local, font are loading correctly but after publishing on Azure,looks like they are not loading.
After inspecting the font on Azure app, font is getting applied but the size is bigger than what it looks on local however all css classes and properties applied are same.
What Tried -
Tried by embedding font in solution directory as well, removed cdn and used embedded fonts. Made required changes for MIME types in web config as below
Tried by disabling bundling
Can you please guide, where am I doing wrong?
We wanted to use cdn itself and not embedded font
Working on a client project - reskinning their intranet. The way their security is set up, all external media is denied, including any Google Fonts. The tricky part is they're requiring us to restyle with a Google Font.
Prompting users to install the font themselves is, of course, unacceptable. Is there a way I can download a Google Font file and put it locally on the website?
UPDATE: After a bit of legwork, I found that you can download and use the compressed version of a google font to keep your site relatively optimized. Go to the import URL:
http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic
In the src attribute (the themes.googleusercontent.com URL) download the .woff file it links to, rename it as you please, upload it to your website's media directory, then point to that local file instead of Google's URL.
You can download them from Google and host them on your own server
Use the download button in the upper right corner at Google Fonts to download your collection
See https://developers.google.com/fonts/faq#Download_Fonts
As #Mike already mentioned in a comment, there is localfont.com which helps you download all font variants and generates cross-browser CSS for implementation. What you get from Google Fonts itself is ONLY TTF and therefore will not work on all Browsers. What you can manually download by accessing the Google CSS file actually depends on which Browser you use. localfont.com provides TTF, WOFF, WOFF2, EOT and SVG for all fonts available on Google Fonts.
I have applied some fonts in my CSS. they are applied when I run the website from my visual studio. but when I host the website in IIS fonts are not applied.
I am using CSS3 property font-face to load font files.
I have Googled a lot but I did not find any solution for it.
Can any body help me here?
Thanks.
If you are facing the similar issue , try adding .woff and .svg extensions in IIS MIME Type.
By default, the MIME types in IIS are configured to deliver EOT (as used by IE) and TTF files. But WOFF (Firefox) and SVG (iPhone, iPad & others) will not be served.
Open IIS , go to your IIS Type section and Add following extension there.
.woff application/x-woff
.svg image/svg+xml
I have a django site running locally. Everything seems ok except the CSS files that can not be loaded by Chrome. I can see a Failed to load resource error in the console.
The site is ok in firefox
The site is ok if I get the css not from the local server but from the production server
The css source can be viewed correctly
I have no special blocker plugin install
The css is rather big but I still have the issue if I use a very short file
I have similar issues with some js files (ckeditor)
It works of with some other css and js (admin css for example)
The django app has been developped with 1.0 and I am in the process of moving it to 1.4. The css and js files are served as media
Any idea?
Didn't find the real cause but the problem is solved. Maybe because it was served as media and now it is served as a static.