From the page source I can see there are two references to fonts.googleapis.com
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,300,400,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css' />
but while page load there are lot of .woff2 file loading from http://fonts.gstatic.com/
I want to know why this is happening?
When you look inside the referenced CSS files, you will see there are multiple font-faces defined. This is what the URL was requesting. A query like Open+Sans:400italic,600italic,700italic,300,400,600,700 means, give me Open Sans in
400 italic
600 italic
700 italic
300 normal
400 normal
600 normal
700 normal
The numbers mean font weight.
So only the first CSS file already escalates to 7 font-styles.
The second CSS file has mostly the same fonts defined. Only 3 of them are not covered in the first file. This should sum up to 10 different font-styles.
Open Sans has a lot of script extensions available:
Cyrillic Extended (cyrillic-ext)
Latin (latin)
Greek Extended (greek-ext)
Greek (greek)
Vietnamese (vietnamese)
Latin Extended (latin-ext)
Cyrillic (cyrillic)
To cover all those combinations, Google creates font-style * script font-face definitions, which results into 70 font-faces each with a different font file (in case of Google Chrome woff2).
To reduce the number of files:
Make sure you need all those font-styles. You really need all those different font-weights?
Do you need all the extensions? If you will never display vietnamese or cyrillic characters you do not need to load those fonts.
Both can be individually selected on the Use page of Open Sans.
Related
I have seen a couple of projects where they just mention the name of the fonts they want to use in the CSS file without any mention of the source or the TTF or other font files.
eg
code {
font-family: source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace
}
When I remove those fonts via CSS in inspect element I can see the fonts are changed. So the code works. But I don't understand how the browser figures from where the fonts should be downloaded.
The code works even in incognito so not sure if the browser caching the font is a valid explanation.
Notice that the last setting in the font-family list is sans-serif.
If the local system has absolutely none of the other fonts loaded locally then the system will use whatever it has set as its default sans-serif font.
That is why it looks as though 'it works' when you say this:
#Fabrizio Calderan loves trees I checked the system fonts with this css-tricks.com/snippets/css/system-font-stack link. But the mentioned font family is not matching any of the fonts in the system fonts. So the default font should be picked right?
You are right, it picks the default font, but the version that is sans-serif.
As you can see in the above picture,I created a sample.html file and used the font-family for the body tag. So the source provided does not mention in font-family section. in the result, fonts will load from "Fonts" folder in my windows folder. (Of course if you use Windows OS and website locally, mentioned process will be happen!)
There are several ways the browser decides what fonts are downloaded/used:
As user 'Fabrizio Calderan loves trees' stated (paraphrased):
If no sources are provided, they are loaded from the computer running the webpage in a browser.
The programmer uses external APIs or links that embed a font. An example of this is Google Fonts, which lets programmers choose fonts they want (and select them), and embed them using either a <link> tag (put into HTML code) or #import tag (put into CSS file).
The website you are looking at may contain #font-face statements in their CSS, which links a common name (i.e., 'Source Code Pro') to a font file. You can read more about #font-face here and here.
If you can't find evidence of any of these, could you possibly share a link to the webpage's source code?
EDIT
I took a look at the code in the website. It seems like the fonts styling in the display/textarea is:
.displayArea{
font-family:"Lucida Sans","Lucida Sans Regular","Lucida Grande","Lucida Sans Unicode",Geneva,Verdana,sans-serif;
}
And, there doesn't appear to be a source of these fonts, so it is part of the 1st category I listed above. Basically, the fonts in quotes are fonts that may be used if already preinstalled inside the client's computer, if not, the browser goes down the list and keeps checking whether the client has the font installed. The ending font is sans-serif, which is a default font that all computers have, so it serves as a backup in case all other fonts aren't available.
We are currently loading a couple of fonts on our site from google fonts using the following link
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons%7CRoboto:300,300i,400,400i,500,700&display=block">
As you can see, at the end of the query string, we have display=block to stop the font from rendering before it's loaded (as it adds font-display: block). However, this adds block to all declarations of every font face. Is there a way to only add this to the material icons font without having to make 2 separate requests?
This question has been asked quite a number of times, but none of them works for me. For example:
Google fonts font-weight of 100 is not working. (I don't have the font I want to use already in my system.)
Why is google font weight not working?. (I'm not using it in a heading, just a regular paragraph.)
I used Google Fonts with the #import like so:
#import url('https://fonts.googleapis.com/css?family=Rubik');
body {
font-family: 'Rubik', sans-serif;
}
The typeface shows up, but I can't do anything with the weight. The <strong> tags aren't displayed bold. The font-weight property in the CSS isn't working. Not even overriding it in browser's inspector changes anything.
Update
The thing seems to only work on Gecko-based browsers, like Firefox.
The answer is that the Google font isn't calibrated to carry all of the weights you want with it.
Some of the browsers may display 'thicker' or 'thinner' type, but they are tricking you. They are doubling up the normal font to simulate what you are asking for when there is no actual weight of that type available. The ones that do that are trying to be nice, but these days it is more confusing than helpful. According to your code snippet, you have:
#import url('https://fonts.googleapis.com/css?family=Rubik');
vs
#import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500i,900,900i');
(Google Fonts UI 2017 - may look different in the future but the concept is the same for any font service)
Many fonts only have 1 weight.
Here's a list of all of the possible names for font-weights;
Thin 100
Extra Light 200
Light 300
Regular 400
Medium 500
Semi-Bold 600
Bold 700
Black 900
I have had also issues to get the weights working, even though I had properly copied the HTML code from google and put into my head.
Solution:
I used the #import function by adding it my CSS and now everything works without issues. Seems that #import is more robust or less conflicting with wp themes.
I had the same issue.
For me the problem was that my link to bootstrap was placed after my link to styles.css in my html, and thus bootstrap overrode the style for h1.
The solution was simply to put the link to styles.css after the link to bootstrap in my html. :)
I had the same problem until I found out that you can not change the font weight of the body.
you have to target the exact tag you want to change the weight
eg.
Check this code out
I had the same problem: i noticed that it occurred when you import the font on the css file like:
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
So in order to solve i just imported all the font weight from the html file and then use the font weight and the font family as usual in the css file:
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
Doing like this i was able to solve my problem. Noticed that you can't specify the font weight in the body tag but you have to do in the single html tag like h1 h2 h3 p ecc
The no. of fonts weights you require select them all.This will look like this:
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght#0,400;0,700;1,300&display=swap');
Now you can use all this font-weights.
I'm blocked by a question, on some Android device, I type some emoji and save them to database.Then load them and display in html page, but the emoji is invisible if set a font-weight: bold.If set font-weight: normal can display.
How does css font-weight work?
How does the browser parse CSS when it sees font-weight:bold or font-weight:normal?
System will call a bold font file (e.g., see Google Fonts which will list different weights of a font family) and if you don't have that font file on your device, it will fail to display the characters (actually for regular characters system tend to load a similar font in this case, but emoji characters are not regular).
You can include webfonts and contain the bold family in <head> section. E.g.,
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
I currently have a webpage which uses 2 font files and a lot of images
i have optimized the images to an extent, but my page still loads very slow,
next option was to optimize the font files
I am using Diavlo font for the logo , the size of the font file is 55kb.
i have read that Google fonts by specifying a text= value in your font request URL.
This allows Google to return a font file that's optimized for your request. In some cases, this can reduce the size of the font file by up to 90%.
#font-face{
font-family:'diavlo';
src: url('diavlo_medium_ii_37-webfont.eot');
src: url('diavlo_medium_ii_37-webfont.eot?#iefix') format('embedded-opentype') ,
url('diavlo_medium_ii_37-webfont.ttf') format('truetype');
}
I did not find Diavlo in Google Fonts.
Google fonts
http://fonts.googleapis.com/css?family=Inconsolata&text=Hello
So is there a way i can provide only the text i require to get a minimal .ttf file
and should i include either .woff file or .ttf or both.
If you know which characters you need specifically, you can use Font Squirel's #font-face generator and specify only which characters you want, this is the only way i know of doing it. This will generate the needed font files, with only the characters you want.
Note: make sure you have it set to expert mode