Coding for Beginners: CSS Basics #64— Service-Based Font Face, Part 1
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
------
Let's now look at service-based font face. In this case, you are using a service, whether free or paid, to deliver the font files to your user. The most well known service-based font face is Google fonts, primarily because Google provides its fonts for free. Another service that a designer may be familiar with is Adobe Typekit. It is also possible to purchase subscriptions with various type foundries to get access to their service-based fonts.
The advantage of using a service-based font face is that you don't need to worry about converting your font files to all the different type file formats using a @font-face generator like Font Squirrel. The service takes care of providing all the appropriate files so that as long as you pay for the service, your fonts will be delivered to the user so that the font displays as it should no matter what browser they are on.
With a service-based font face you just need to know what code to embed in your files to deliver the fonts. You should still use a font stack because if something happens with the service's server that may be a reason the fonts are not delivered. This way, an appropriate font will be chosen to which the user has access.
So if we go to Google Fonts, you have all sorts of different fonts that you can choose. And you can choose whichever font you like. It'll give you all the weights that are available so you have light, regular, semibold, bold, extra bold, and italic. And you can look at the glyphs palette, and it will tell you a little bit about the designer and the licensing. So one of the main reasons that people use Google Fonts, of course, is because you don't have to pay licensing fees with Google, and that's why they became particularly popular. And as an Adobe user, you also probably have access to Adobe Typekit and so the process would be similar for any web-based font foundry...that you would go to the page and you need to get the embed code.
#HTML #CSS #coding #web #accessibility #service-basedfontface #fontface #@fontface #googlefonts #adobetypekit #webtypography #typography #font-weight #font-style #fontfamily #font-stretch #cssfonts #service-basedfont-face #webfonts #font #codinglife #webdesign #designerslearncode #dailycodesnippet #codingforbeginners #tags #openingtag #closingtag #learntocode #codingtutorial #htmltutorial #csstutorial #webdevelopment #htmltutorialforbeginners #csstutorialforbeginners #programmingforbeginners #htmlcssfullcourse