![]() |
VOOZH | about |
The author selected the Diversity in Tech Fund to receive a donation as part of the Write for DOnations program.
The visual identity of a website is largely dictated by two principles of design: color and typeface. In the last decade, there have been great strides in providing custom fonts to users with more preloaded fonts on devices, the ability to load custom fonts with the @font-face rule, and the use of font hosting services. Web browsers have also implemented support for variable fonts, which are single font files from which multiple fonts can be interpolated, providing a high-degree of tuning and font customization.
In this tutorial, you will try out examples of loading fonts onto your website. You will use the font stack, a rank ordering of fonts based on availability, to use fonts that may be installed on the userβs device. Then, you will use a font-hosting service, Google Fonts, to find, select, and load custom fonts onto your page. Lastly, you will load a self-hosted font family using the @font-face rule, followed by a self-hosted variable font.
Deploy your frontend applications from GitHub using DigitalOcean App Platform. Let DigitalOcean focus on scaling your app.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Cascading Style Sheets (CSS) is the styling language of the web, and is used to design and control the visual representation of Hypertext Markup Language (HTML) on a web page. With CSS, you can manage everything from font to layout to animations on your web page. This series will lead the reader through CSS exercises that demonstrate the building blocks of the language and the fundamental design principles needed to make a user-friendly web site.
Browse Series: 20 tutorials
I code, design, write, and teach and Iβm an IAAP Certified Web Accessibility Specialist.
I help Businesses scale with AI x SEO x (authentic) Content that revives traffic and keeps leads flowing | 3,000,000+ Average monthly readers on Medium | Sr Technical Writer(Team Lead) @ DigitalOcean | Ex-Cloud Consultant @ AMEX | Ex-Site Reliability Engineer(DevOps)@Nutanix
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.