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
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.
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.
In my ASP.NET Web Forms project, i am using bundling and minification. I want to use Fontawesome CDN with fallback support but problem is that only CDN is working and as a fallback my downloaded local Fontawesome is not working.
I am using StyleBundleFallback
for stylebundle cdn fallback.
I have checked that i am referencing fontawesome correctly.
Although Bootstrap 5 is working fine but only fontawesome is not working.
Here is my code:
bundles.Add(new StyleBundle("~/webfont", fontico)
.IncludeFallback("~/Content/font-awesome/css/all.css", "sr-only", "width",
"1px"));
Above code is working fine because it is using correct cdn url. You can try to modify this url to make a fallback so that it should use local fontawesome file but it is not working.
As far as I know, this works the other way around. i.e. tries the CDN first, fails to a local version of the library if the CDN isn't available.
In terms of site optimization and speed; is it better to include a font locally or use a css #import? (I'm using google's web-fonts)
You will need to do a test on your own. The simplest way to do so is to use a developer tools console in your browser and to check a network section to see how how long it takes for the files to be loaded. It is possible that your web server may dish out files slower or faster than google.
Additionally, some browsers, like Firefox, by default, may not include font files downloaded from a different domain. To make sure your site renders as expected, I would serve font files from within the domain that the user visits.
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.