Скачать или смотреть Coding for Beginners: Using an @font-face generator with Font Squirrel

Coding for Beginners: Using an @font-face generator with Font Squirrel

Previously we discussed how for a service-based font face method all you need to do is get the lines of code that you need to embed from the service's website and add it to your code. And then you should find out the language you need to use to activate that code. So we saw how with Google fonts, all you do is go to their website, choose the font, select the weights and styles you want, and then copy the code provided and place it in the head element. This code is a link element that allows your webpage to connect to Google's servers to pull in the font files that are needed for your chosen font. And then you need to look at the "CSS rules to specify families." This tells you how you need to write out the font name in your CSS in order to pull that font into your styles. You need to use the language that Google understands. And it is always a good idea to still include a font stack just in case there is an issue with the server.

While we went over what to do with Google, the process will be very similar with other services. We will still need to get an embed code or link to that service's servers. And then we need to understand what code we need to add to our CSS that that service will understand.

In comparison, we mentioned that traditional @font-face means we need to provide the different type file formats. So there needs to be a mechanism for us to produce those different type of file formats if they are not provided by the type foundry from which we obtained the font. If you are purchasing a font and properly licensing it, typically the foundry will provide all the font files you need. However, if you are obtaining a free font online, you may only be provided some of the file formats and need to convert the file into the other formats. If you have obtained a font without properly licensing it for use on the web, then you should not use this method to produce the files. In fact, the service will ask whether you have a proper license and in some cases, it will not even work if it finds you do not have a proper license. You should never use a font on the web without proper licensing.

Font Squirrel has an @font-face generator where you can upload a font file and it will then convert the file into the web file formats that you need. Once the conversion is completed, you will receive a folder of files as well as a stylesheet that indicates how the font can be loaded into your webpage. The video has a demonstration.

https://www.fontsquirrel.com/tools/we...

Once you have the files, you will then need to upload these folders with the rest of your assets such as images or other media. Then you need to make sure the CSS stylesheet provided is being loaded properly so that you can access the fonts. A main drawback of traditional @font-face is the loading speed of your website. Depending on the size of these font files, it may slow your website down. In addition, you have to consider the reliability of your hosting since you are the one providing the font files on your server. If your host is down or the connection is slow, this will affect whether your custom fonts load properly.

So you can see why service-based font face has become more popular. It is much simpler to bring custom typography into your websites. And if you are unhappy with the quality of choices provided by Google, a paid service such as Adobe Typekit or by other foundries may work better for you. With a service, you don't need to worry about proper formats, licensing (since this is included as either free or through your subscription), and Google and Adobe will generally have servers that are more reliable and faster than what you can purchase on your own.

Jumpstart Your Learning of HTML and CSS is now LIVE! If you’ve been enjoying The Daily Code Snippet and want to accelerate your learning of HTML and CSS, be sure to check out this workshop: http://get.designerslearncode.com/jum...

In this coding bootcamp, you will not only learn about code but also have hand’s on practical and by the end of the course, you will have coded your first web page. This course is suitable for beginners as we go over the basics. The course does touch upon topics that may be more familiar to those who are designers. This may be helpful to those who want to learn how to create websites with design in mind.