Font Family
The last fonts named in the font-family are fallback fonts.
This paragraph has a serif font-family. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae unde reiciendis, eaque mollitia in velit rerum corporis totam magni sint dolorem aperiam aspernatur quis perspiciatis, quasi tempore impedit, facilis nulla?
This paragraph has a sans-serif font-family. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae unde reiciendis, eaque mollitia in velit rerum corporis totam magni sint dolorem aperiam aspernatur quis perspiciatis, quasi tempore impedit, facilis nulla?
This paragraph has a monospace font-family. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae unde reiciendis, eaque mollitia in velit rerum corporis totam magni sint dolorem aperiam aspernatur quis perspiciatis, quasi tempore impedit, facilis nulla?
This paragraph has a cursive font-family. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae unde reiciendis, eaque mollitia in velit rerum corporis totam magni sint dolorem aperiam aspernatur quis perspiciatis, quasi tempore impedit, facilis nulla?
This paragraph has a fantasy font-family. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae unde reiciendis, eaque mollitia in velit rerum corporis totam magni sint dolorem aperiam aspernatur quis perspiciatis, quasi tempore impedit, facilis nulla?
CSS Web Safe Fonts
Web safe fonts are fonts that are universally installed across all browsers and devices but there are no 100% completely web safe fonts.Therefore, it is very important to always use web safe fonts.
This is the Arial font. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, aspernatur. Neque cupiditate et enim ipsa omnis, molestias doloribus in incidunt qui illum consectetur adipisci officia, exercitationem quae iusto nobis. Vero.
This is the Verdana font. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, aspernatur. Neque cupiditate et enim ipsa omnis, molestias doloribus in incidunt qui illum consectetur adipisci officia, exercitationem quae iusto nobis. Vero.
This is the Tahoma font. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, aspernatur. Neque cupiditate et enim ipsa omnis, molestias doloribus in incidunt qui illum consectetur adipisci officia, exercitationem quae iusto nobis. Vero.
This is the Trebuchet MS font. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, aspernatur. Neque cupiditate et enim ipsa omnis, molestias doloribus in incidunt qui illum consectetur adipisci officia, exercitationem quae iusto nobis. Vero.
This is the Times New Roman font. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, aspernatur. Neque cupiditate et enim ipsa omnis, molestias doloribus in incidunt qui illum consectetur adipisci officia, exercitationem quae iusto nobis. Vero.
This is the Georgia font. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, aspernatur. Neque cupiditate et enim ipsa omnis, molestias doloribus in incidunt qui illum consectetur adipisci officia, exercitationem quae iusto nobis. Vero.
This is the Garamond font. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, aspernatur. Neque cupiditate et enim ipsa omnis, molestias doloribus in incidunt qui illum consectetur adipisci officia, exercitationem quae iusto nobis. Vero.
This is the Courier New font. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, aspernatur. Neque cupiditate et enim ipsa omnis, molestias doloribus in incidunt qui illum consectetur adipisci officia, exercitationem quae iusto nobis. Vero.
This is the Brush Script MT font. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, aspernatur. Neque cupiditate et enim ipsa omnis, molestias doloribus in incidunt qui illum consectetur adipisci officia, exercitationem quae iusto nobis. Vero.
Font Style
This paragraph has a normal font-style value. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil iure temporibus fugiat labore maiores modi adipisci cumque? Optio perferendis quod accusantium reiciendis sapiente esse autem nemo iste inventore! Quae, facere?
This paragraph has a italic font-style value. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil iure temporibus fugiat labore maiores modi adipisci cumque? Optio perferendis quod accusantium reiciendis sapiente esse autem nemo iste inventore! Quae, facere?
This paragraph has a oblique font-style value. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil iure temporibus fugiat labore maiores modi adipisci cumque? Optio perferendis quod accusantium reiciendis sapiente esse autem nemo iste inventore! Quae, facere?
Font Weight
This paragraph has a normal font weight. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente labore similique fugiat quod non, recusandae maiores, illo dicta eveniet voluptatibus ipsa officiis error, iusto dolores fugit repellat! Iusto, molestias aliquid?
This paragraph has a bold font weight. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente labore similique fugiat quod non, recusandae maiores, illo dicta eveniet voluptatibus ipsa officiis error, iusto dolores fugit repellat! Iusto, molestias aliquid?
Font Variant
Like a boolean property which if in small-caps font, all lower-case letters are converted to uppercase but with smaller font.
This is a normal font variant. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit voluptate nemo eaque mollitia dolorem asperiores veniam necessitatibus expedita magni dolor labore temporibus animi, culpa repellendus. Repudiandae fugiat facilis repellendus a.
This is a small-caps font variant. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit voluptate nemo eaque mollitia dolorem asperiores veniam necessitatibus expedita magni dolor labore temporibus animi, culpa repellendus. Repudiandae fugiat facilis repellendus a.
Font Size
This paragraph uses 40 pixels font size. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam voluptas odio alias aspernatur assumenda explicabo amet iure distinctio sunt placeat aperiam fugit quibusdam reprehenderit exercitationem, doloremque praesentium dolor, temporibus quidem?
This paragraph uses 2.5em font size. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam voluptas odio alias aspernatur assumenda explicabo amet iure distinctio sunt placeat aperiam fugit quibusdam reprehenderit exercitationem, doloremque praesentium dolor, temporibus quidem?
This paragraph uses 30 pixels font size. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam voluptas odio alias aspernatur assumenda explicabo amet iure distinctio sunt placeat aperiam fugit quibusdam reprehenderit exercitationem, doloremque praesentium dolor, temporibus quidem?
This paragraph uses 1.875em font size. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam voluptas odio alias aspernatur assumenda explicabo amet iure distinctio sunt placeat aperiam fugit quibusdam reprehenderit exercitationem, doloremque praesentium dolor, temporibus quidem?
This paragraph uses 14 pixels font size. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam voluptas odio alias aspernatur assumenda explicabo amet iure distinctio sunt placeat aperiam fugit quibusdam reprehenderit exercitationem, doloremque praesentium dolor, temporibus quidem?
This paragraph uses 0.875em font size. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam voluptas odio alias aspernatur assumenda explicabo amet iure distinctio sunt placeat aperiam fugit quibusdam reprehenderit exercitationem, doloremque praesentium dolor, temporibus quidem?
This paragraph uses a responsive font size design using viewport or vw value. This paragraph has 1vw or 1% of the viewport width. Try to resize the browser window.
This paragraph uses a responsive font size design using viewport or vw value. This paragraph has 2vw or 2% of the viewport width. Try to resize the browser window.
This paragraph uses a responsive font size design using viewport or vw value. This paragraph has 3vw or 3% of the viewport width. Try to resize the browser window.