This format works well with almost all major browsers. Open Type Fonts (OTF) – the most commonly used web fonts and are a registered trademark of Microsoft.Nevertheless, even if your chosen font is unsupported, you can still convert it to a compatible format.īefore converting fonts from one format to another, let’s have a quick look at different font formats: It is worth mentioning that not all web browsers support every custom font. Converting Fonts to a Web-Friendly Format
If you’re looking for something more suited for personal use, check out sites like, DaFont, and 1001 Free Fonts. Other than that, Google Fonts has over 900 font families, and Edge Web Fonts, provided by Adobe, offers a vast collection of web fonts. You can easily find free fonts that are licensed for commercial work. There are numerous sites where you can find free web fonts, and Font Squirrel is one of them.
In this article, you will learn how to add custom fonts to WordPress both manually and by using plugins. However, the choice of WordPress fonts can be limited and theme dependent. Start A Free 7-day Email Course On WordPress One of them is by adding custom fonts so your WordPress website. Now you have the knowledge you need to start using the CSS line-height property like an expert!Īre you looking to become a web developer? Check out our How to Learn CSS guide for expert tips and guidance on the top learning resources and courses.There are countless ways how to make your WordPress site look more eye-pleasing. This tutorial discussed the basics of the CSS line-height property and how you can use it in your code. The line-height can be set using the normal keyword, a percentage, a length, or a numerical value.
Usually, this property is used to set the spacing between lines of text in a paragraph or heading. The CSS line-height property sets the height of a line box. This would mean that both our title and our tag would be affected. This would set the line height for all the text in our tag to the values we specified. We could also apply our line-height to our element in the above example. The text in the paragraph above is adequately spaced out and does not overlap. “rem” stands for “root element.” So, because our font size was 16px, our line height for this paragraph of text was 25.6px (16px * 1.6). The “rem” unit of measurement we used with the line-height property sets a line height relative to the font-size of the root element. We set the line height to 1.6rem and the font size to 16px for all HTML tags. » MORE: How to Make a Dropdown Menu with Bootstrap So, we decide to set the line height of the paragraph of text on the web page to 1.6rem. We want our text to be properly spaced out. The page contains a heading followed by a paragraph of text outlining a description of the club. Suppose we are designing an “About Us” page for a local cooking club’s website. This is because values lower than 1.5 for line height can make it more difficult for visually-impaired readers to use your website. When you’re using a number to set the line height of an element in CSS, you should not use any values lower than 1.5. Accessibility should always be a consideration when you are building a website. Text that is difficult to read has a particularly serious effect on those who have visual impairments. If there is not enough space between lines, text may be difficult to read. This is because you always want to make sure that there is adequate space between lines. A Note on AccessibilityĬhanging line spacing is a common use of the line-height property. If you apply the line-height property to a box, all the text within that box will use the line height you have specified. This value is usually around 1.2, depending on what browser the viewer is using. This keyword specifies the use of the browser default.
» MORE: CSS Best Practices, Guidelines, and Resources for Your Web Development CareerĪlternatively, you can specify the “normal” keyword. The syntax for the CSS line-height property is as follows: This is much like formatting text in Microsoft Word to be double spaced or 1.15 spaced. This method is often used to set the distance between lines of text.Īadjusting line height lets you indirectly adjust spacing between lines of text (or other elements) on a web page. Line boxes are the lines that make up a box in CSS. By the end of reading this tutorial, you’ll be a master at using the line-height property in your code. We’ll refer to an example to help you get started. This tutorial will discuss how to use the CSS line-height property.