I am importing 'Roboto' fonts on my sass file
#import "https://fonts.googleapis.com/css?family=Roboto:400,300";
.email-container {
font-family: 'Roboto';
}
The same email works in my machine in chrome gmail, but it doesn't work in some of my colleagues.
Could it be from some kind of their settings ?
Email clients are very cautious with loading external content. Most clients are outdated and rely on html4.
Css in some clients isn't parsed either. This could be the reason that the font isn't imported.
To fix this you could use inline style attributes but you won't be able to load a custom font. At least you will have a decent looking email.
Related
I have a single page which needs one Google font for English characters and a different Google font for Thai characters.
It's possible to do use this using the #font-face syntax by defining which unicode character range should use which font.
However Google fonts don't give you any option to use the #font-face syntax. Is there any way to specify unicode character range when importing fonts using Google's #import or <link> declarations?
It's possible to manually find this syntax by loading the URL provided by Google. For example, the #import rule for Noto Sans Thai is this:
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght#200;400&display=swap');
Loading that URL directly shows you the #font-face declarations.
Unfortunately, these are fixed in time and will eventually go stale, when the font is updated. This means future users will always need to download this specific version of the font even though they may have a more up-to-date version cached in their browser.
We are building a web application where different users see different colors, fonts, border widths, etc depending on the Material UI JSON theme that is pulled from the database when the application loads.
The problem comes with dynamic fonts. What methods have people tried to dynamically load the font(s) that are needed for the theme? To be clear, a font that is seen by one user may be different from a font seen by another user.
For example, user one may have the following theme definition:
"fontFamily": "'Galaxie', sans-serif"
While user two might have the following theme definition: "fontFamily": "'Roboto', Arial, sans-serif"
Typically you would define a CSS file or add a line to the HTML that would load these fonts from the server. However, we would prefer that user one only had to download the Galaxie font, while user two only has to download the Roboto font.
Current solutions we are thinking of:
Just make all users load all fonts (not going to work at scale)
Create a CSS file, to define fonts, that is dynamically populated depending on which user requests it from the server
You can import custom fonts from here.
https://material-ui.com/guides/interoperability/#raw-css
I'm trying to find out which one loads faster. Upon checking the audit tab in Chrome both approach result in a slow First meaningful paint. I'm using googleapi font to render fonts in my site. Below are the codes I'm comparing
<link href='https://fonts.googleapis.com/css?family=Montserrat&subset=latin' rel='stylesheet'>
vs
#font-face {
font-family: 'Montserrat';
src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
}
Now it seems that hosting the font on my local directory loads slower. I'm not sure if what I'm doing is correct. Any idea which one is faster and what is the best way to implement this?
I'm just trying to cut down the First meaningful paint down to half. I used the link in to reference the googleapi but upon checking the audit its taking 1,500ms just to load this from googleapi site.
Everything you put inside the <head> tag will be loaded before everything else.
So the <head> first loads the css file, after that it loads the #font-face.
If load the font inside the <head> using <link>, the browser will first load the font, then the css file.
So <link> will be faster in terms of performance. Not that it will be a huge / notable difference.
Also:
In your example there is also a difference with loading it with from google's cdn or serve it from your local server.
Cdn's are meant to serve files really fast. Depending what server you have, Im pretty sure google's servers are way, way fasterf. So google's option loading it with the <link> tag is the recommended way to go.
See also this SO question, its about #import. But its just the same as #font-face { src: ... ; }
Including Google Web Fonts link or import?
Very misleading answer above.
The <link> loads a CSS with #font-face inside. It is verifiably slower.
We should design code so that web pages load fast; however, a user's device can affect slow down the loading of web pages. For this reason, I take into account how slow a web page could load for some users when designing and coding my web pages. Linking to the font in the HTML will quicken the font face being displayed before other styles. However, I would rather styles for images and the like to be displayed as soon as possible. Changes in such elements can be rather jarring, so I use #font-face in my main CSS file instead of linking to font files in the HTML.
I have updated a web page that I didn't create. I worked locally perfecting the new layout which was fine.
However when I moved it to the server, a lot of styles didn't apply.
In troubleshooting, I found that the styles that weren't working on the server were listed as "Author Stylesheet" styles locally (in Safari Dev Tools). There are no inline styles nor is there a style tag in the HTML. The other external stylesheets show the name of the stylesheet with the line of where to find the style.
How can figure out what the source of the Author Stylesheet actually is?
I'm not sure if this is 100% accurate, but I believe that Safari will not show the name of the css file if it is named default.css. In my case, Chrome tools displayed the file name (not just "Author Stylesheet").
Wayne, I don't think you might declare the author of CSS file on it. You must passing the wrong name or locale from CSS server, is there all your CSS found? Aren't u using css on your local or .min.css in your app? User google chrome in the console tab to look wgat is the problems with your stylesheet.
I have just installed a custom WordPress theme (this is my first time working with WordPress, so I'm still learning a lot) and I need to make the font of the blog match the font for the rest of the web site, which is a Google Web Font.
I went to the custom theme's stylesheet editor in the WordPress Dashboard and added the font via #import. So it currently looks like this:
/* Make all custom CSS changes BELOW this line
-----------------------------------------------------------*/
#import url("http://fonts.googleapis.com/css?family=Questrial:700,400");
body { font-family: Questrial, sans-serif; }
But that didn't change the font in the blog. Am I not implementing the web font correctly? Is there some better/other way to do what I'm trying to accomplish?
Thanks for anyone's help!
Well, it looks like you are implementing the font correctly.
Try using a tool like Firebug for Firefox or Google Chrome's built in developer tools to see if the HTTP Request is coming back OK from the Google Fonts server.
If it's properly loading the CSS file, your problem may lie within CSS inheritance. Because of the 'Cascading' part of the Cascading Style Sheets, there may be a rule that is higher on the list of importance. You'll just have to hunt through and find it. Again you can use Firebug or Chrome developer tools for this as well.
The most simple solution may be simply adding an font-family: Questrial, sans-serif !important;