[Solved] Some Questions Regarding @Font-Face/FontSquirrel Embedding…

[Tom Houy]

I had a couple of questions regarding embedding web fonts on to a page using services such as FontSquirrel.

1.) When creating web fonts with FontSquirrel’s tool, it creates multiple font file types, along with the code to include these in your CSS. Does the user’s browser download all of these variations, or only the one(s) it needs?

2.) When dealing with font variations, how do we make sure the property values for “font-weight” match up to the proper font files? For example the Google web font “Alegreya Sans” has a total of 14 variations. If I were to use something like “p{font-weight:700;}”, how do I ensure it is pointing to the correct font file, assuming I embedded all 14 variations into my page? When I open the actual font file that it should be using, I don’t see any mention of “700” in it.

[noahgelman]

1. Modern browsers seem to only load 1 version that it needs. Here is a stackoverflow.com post about it. An easy way to test this is to load the @font-face in a blank index file and open it with a browser, and check which files were loaded via the inspector. That’ll give you a definite answer.

2. Google fonts allows you to select which sizes to include and tells you how to specify them in your css. Check their how-to page

[Tom Houy]

Perfect, thanks!

[Author]

Posts