Coding for Beginners: CSS Basics #61— How to Use @fontface
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
------
@font-face was a method developed to load a custom font that moves beyond web safe fonts because the fonts will be provided to the user, typically delivered from a remote server. While there are several properties that can be defined under @font-face, the minimum required properties are that you need to provide the name of the font-family and the url(s) where the font files are located. Previously, we discussed how different browsers recognize different font file formats, so in order for @font-face to work cross-browser, you need to supply multiple types of font-file formats to the user. We will go over the different file formats in the next video. Today we will discuss the syntax of @font-face.
Here is an example of @font-face:
@font-face {
font-family: "Sentinel Book";
src: url("../assets/fonts/Sentinel-book-webfont.ttf") format("ttf"),
url("../assets/fonts/Sentinel-book-webfont.otf") format("otf"),
url("../assets/fonts/Sentinel-book-webfont.eot") format("eot"),
url("../assets/fonts/Sentinel-book-webfont.woff") format("woff"),
url("../assets/fonts/Sentinel-book-webfont.woff2") format("woff2"),
url("../assets/fonts/Sentinel-book-webfont.svg") format("svg");
}
In our example, we are loading the font Sentinel, which is a custom font from the former Hoefler-Frere-Jones type foundry. We are loading the book weight and you can see we are providing several font formats: ttf (true type font), otf (open type font), eot (embedded open type), woff (web open font format), woff2, and svg (scalable vector graphic). Each of the formats has its own url and we are telling the browser what kind of file it is by specifying the format. If our font name has more than one word, we need to enclose it in quotes.
To use this custom font in an element on our page, we use the name we have specified in the font-family property under @font-face.
For example, if we want to use Sentinel as our paragraph text we would now write:
p {
font-family: "Sentinel Book", Georgia, "Times New Roman", serif;
font-size: 16px;
line-height: 1.3em;
}
You should still specify a font stack because if there is an issue loading from your provided url, the browser has some direction on what font to display in its place. We will discuss font-size and line-height in later episodes.
#HTML #CSS #coding #web #accessibility #@fontface #howtouse@fontface #webfonts #cssfonts #webtypography #fontfamily #websitetypography #cssfontface #cssfont #cssfonttutorial #cssfont-familyproperty #codinglife #webdesign #designerslearncode #dailycodesnippet #codingforbeginners #tags #openingtag #closingtag #learntocode #codingtutorial #htmltutorial #csstutorial #webdevelopment #htmltutorialforbeginners #csstutorialforbeginners #programmingforbeginners #htmlcssfullcourse