Coding for Beginners: CSS Basics #65— Service-Based Font Face, Part 2
Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial: https://join.designerslearncode.com/w...
The Daily Code Snippet is part of our "Coding for Beginners" video series for designers to learn the basics of HTML and CSS coding. We teach a single, easy to understand concept in each video so that you can learn to code even if you have a busy schedule. Subscribe here: / @designerslearncode
------
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 section. This code is a link 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.
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 and licensing (since this is included as either free or through your subscription).
#HTML #CSS #coding #web #accessibility #@fontface #fontface #fontfacegenerator #fontsquirrel #service-basedfont-face #fontstack #webtypography #fontfamily #cssfont #websitetypography #@font-facegenerator #cssfonts #googlefonts #adobetypekit #codinglife #webdesign #designerslearncode #dailycodesnippet #codingforbeginners #tags #openingtag #closingtag #learntocode #codingtutorial #htmltutorial #csstutorial #webdevelopment #htmltutorialforbeginners #csstutorialforbeginners #programmingforbeginners #htmlcssfullcourse