My application is a .NET 5 Web API that will run as an App Service on Microsoft Azure
Everything works fine except the custom font I am trying to use
I am trying to link a font from google in HTML and then convert this to pdf
The HTML head has this tag inside
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Muli" />
And the CSS looks like this
html,
body {
font-family: Muli;
}
I have also tried using #font-face like so:
#font-face {
font-family: 'Muli';
src: url(https://fonts.gstatic.com/s/muli/v28/7Aulp_0qiz-aVz7u3PJLcUMYOFnOkEk40eiNxw.woff2) format('woff2');
}
I have also tried downloading the TTF file for the font and adding it to a blob storage container in Azure, and using the link to that file in #font-face
I have also tried to increase the Converter.Options.MinPageLoadTime to 2 seconds
Every single one of these options work on my local machine, but not in Azure
Are there any other options that I might have overlooked, or is there nothing else I can do?
Related
It's common knowledge that Outlook uses Word to render emails. It's also fairly widely known in the HTML email community that Outlook will render a custom font as Times New Roman.
Currently, I hide my font statement from Outlook using conditional statements, and then set Arial as the font. But it occurs to me that Word can use custom fonts, so does anyone know why Outlook can't? And does that mean it can but we haven't worked it out yet?
Microsoft Word and Outlook can display any font that's installed on a system, but Outlook cannot display a remotely referenced font. Outlook can display any font, custom or not, as long as it's installed in a user's local system. But it cannot display a non-system font that's referenced on a remote server.
Let's use Open Sans as an example. Open Sans doesn't come pre-installed on most computers, but it is freely available to download and install from Google Fonts. If you send an email with Open Sans in the font stack and someone with that font installed on their system opens it in Outlook, Outlook will display Open Sans.
However Outlook is not able to display remote fonts. So if a user above does not have Open Sans on their system, Outlook is not able to reference a copy of the font on a remote server to display it.
<!-- Outlook doesn't support this -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Not only does Outlook not support remote fonts, but it chokes on the reference above and display Times New Roman instead (as you mention). This can be fixed by placing the font reference inside a tag that Outlook ignores, like so:
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. -->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--<![endif]-->
I hope this helps explain how fonts work in Outlook!
Short Version:
Is there a way, using Grunt, to include minified CSS and JavaScript inline?
To use usemin's formatting as an example, I would like to see something like this:
<!-- build:css inline -->
<link rel="stylesheet" href="styles/foo.css">
<link rel="stylesheet" href="styles/bar.css">
...
<!-- endbuild -->
<!-- build:js inline -->
<script src="js/foo.js"></script>
<script src="js/bar.js"></script>
...
<!-- endbuild -->
Turned into this something like this:
<style>body { color: red; } /*css is here*/</style>
<script>var foo = 1; bar = 'some javascript code is here'; ...</script>
Long Version:
So, I'm working on a Tumblr theme. In order to use CSS or JS files in a theme, they have to be uploaded to Tumblr. The only way to upload is a crappy little web form that often crashes. I'm trying to avoid this interface until I'm ready to upload the final code because
there's no way to delete uploaded files, and
while I'm in the middle of development, these extra steps take too much time
To get this, I've been copying my CSS and JS into <style> and <script> tags in my file, then copying the whole thing into the Tumblr theme editor. It's faster, so I'm happy with that, but manually copying and pasting CSS and JS into a file seems to go against the spirit of Grunt and the automation it provides.
Ideally, I would be able to run grunt build and have it spit out an html file with the CSS and JS inline, then I can just copy that into the Tumblr interface (well, ideally, I would be able to copy that HTML file to Tumblr, but Tumblr doesn't provide FTP or SSH or any useful interface, so I'll settle for this).
It seemed like grunt-usemin could provide the functionality I'm looking for, but I haven't been able to get it working as I described. Maybe it's only made to put everything into a separate file.
I'm open to using any Grunt tool if anyone knows of one that could accomplish this.
I've used this one before: https://github.com/motherjones/grunt-html-smoosher. It's very straightforward, just provide an input file and output file; no extra configuration, it just finds the files automatically and inlines them.
grunt.initConfig({
smoosher: {
dist: {
files: {
'dest-index.html': 'source-index.html',
},
},
},
});
Hope this helps.
Just providing other references that might be useful:
This grant-inline task do inline css and javascripts but you can do it selective using the _inline parameter. There is also a similar task grunt-inline-assests that do same thing. Both are good to generate HTML e-mails.
Finally, the purpose of this one is a bit different; it inserts all your css and js as externals based on a tag in your HTML. This can be very useful when developing themes and front-ends where you want to have you js or css contained in many small files to easy maintenance. Sails-linker task can be used to inject all css and js while in development and one of the inliners above can be used to generate the final production HTML file with CSS and JS minified and inlined.
Using minify, instead of including the individual CSS/JavaScript files directly, I have something like this in my HTML file:
<link rel="stylesheet" href="/min/g=css8" type="text/css"/>
Autocomplete for CSS or JavaScript doesn't work in this html.
I tried looking for ways to be able to specify the individual files to PhpStorm to use in autocomplete, but could not find any option. Suggestions?
I was messing around with #font-face and I had some weird results. I downloaded and installed the font and it got installed in /Users/myuser/Library/Fonts like it should (I suppose!?). The weird thing is that it was working whatever URL I gave it in CSS.
Now I have removed the #font-face class from the CSS altogether, emptied all possible caches, even disabled & removed the 'Garton' font from Font Book (Mac thingie), but it’s still working! (I’m developing and viewing the page in Eclipse.)
So...
1: how can it work? The only way to make it fail is when I edit the font-family 'Garton' in CSS. Whatever I write in #font-face it works and I have no duplicates in CSS! I restarted the computer, put it up in my PC where it fails. I looked in /Library/Fonts where default fonts are installed I suppose, and there is no 'Garton' there.
Works even without #font-face in css
#header{
font-family: 'Garton',Georgia, serif;
}
Only way to make it fail on mac
#header{
font-family: 'GartonXXX',Georgia, serif;
}
2: If ever get clarity in this, I guess I must install the font it on the webserver that’s hosting the page? Or is there another way?
3: Why do my downloaded fonts get installed in different folder than the default fonts? (Not so important, but I’m very confused.)
If you’ve removed Garton from your Mac, it is odd that your web page still renders in Garton even without #font-face code. I can only imagine that Garton is still installed on your Mac.
Questions regarding that are better asked at apple.stackexchange.com or superuser.com.
If you’re working with #font-face, it’s better not to install the font on your development machine, so that you see what normal users see.
Yes — to use Garton on a public web site (where people without Garton installed on their machines will view the site), you need to have the font file available on the site’s server, or via a font service like Typekit or FontSpring.
You don’t need to actually “install” the font on the web server, you just need to serve the font file from there, just like you were serving an image file or a stylesheet, so that the browser can get it and use it on your web page.
In order to get it to work across browsers, you need to have the font file in a few different formats, and be careful with your #font-face CSS to avoid tripping up Internet Explorer. The easiest way to get this right is to use Font Squirrel’s #font-face generator.
Again, this is a question for apple.stackexchange.com or superuser.com.
I'm trying to use HTML5 Application Cache to speed some things up on an iPhone webapp. It works great for storing images, css and JS, but the problem is that it also tries to store the HTML. I haven't been able to get it to ignore the html and stop storing it in the cache. From what I've read, I have to "whitelist" the files and directories that I want to load no matter what. I've tried listing the files I want cached explicitly, and I've tried adding a series of things under the "NETWORK:" heading. I've tried
*
/
/*
http://mysite.com
http://mysite.com/
http://mysite.com/*
None of them seem to work. Is there any way to ignore HTML files by MIME-Type or anything? Any advice would be appreciated.
Ryan
P.S. Of course, my site is not mysite.com..I just used that for simplicity.
I've avoided this problem by NOT referencing a manifest in each page, instead I have the following within each page :
<iframe src="cache.htm"></iframe> - with styles to hide the iframe
inside cache.htm I have :
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<meta charset="UTF-8">
<title>Main Cache Resource</title>
</head>
<body></body>
</html>
based on previous tests and discussions with people in the html5 "ecosystem", each html-page that specifies a manifest is automatically cached as well.