Code has been added to clipboard!

CSS Web Fonts: Upload Your Custom Fonts and Style Them Using CSS Bold

Reading time 4 min
Published Nov 21, 2016
Updated Oct 2, 2019

TL;DR — CSS web fonts refer to custom fonts that load on web pages. Without @font-face, you would be limited to using web-safe fonts.

What Web Fonts Are

Web-safe fonts were labeled as safe because they were available on many computers. They guaranteed that the text content would be presented the same to all users.

However, CSS web fonts changed this rule by allowing developers to set font files to be downloaded when users visit their websites. Therefore, you can use unique and rarer fonts for your web designs.

Different Font Formats

Uploading CSS web fonts is not difficult. Remember to set the paths (URLs) to the font files to be moved into your CSS. Additionally, you need to indicate the format of each font file to make sure that browsers can recognize and find fonts.

As a rule, it is best to put newer formats such as WOFF2 closer to the beginning, while formats like TTF can be at the end of the declaration.

Here is how the declaration looks:

Example
@font-face {
  font-family: 'SelectedFont';
  src: url('mywebfont.eot'); /* IE9 Compat Modes */
  src: url('mywebfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('mywebfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('mywebfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('mywebfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('mywebfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

OTF or TTF

OTF and TTF are short for OpenType Font and TrueType Font.

TTF is a file extension widely used by Apple and Microsoft. It scales without losing quality and the fonts look the same when on screen and when printed.

OTF is based on TrueType as it also scales without losing quality. It is more suitable for web designers as OTF offers such features as ligatures and smallcaps.

When you are choosing whether to use OTF or TTF, remember that the difference between OTF and TTF is that TTF is better suited for regular use, while OTF can be better for web designers.

WOFF vs WOFF2

WOFF is based on TTF and OTF formats. However, it is mainly for the web use. All modern browsers support the fast compression of WOFF fonts (which leads to fonts loading quicker).

WOFF2 is the newer version of WOFF. WOFF2 offers an improved compression and smaller font file sizes. Therefore, the answer to WOFF vs WOFF2 is that WOFF2 is superior and is now becoming the recommended instead of WOFF font format.

SVG

SVG allows using glyph icons for displaying textual content. You can create fonts within the SVG documents because of unique SVG 1.1 specifications. In addition to that, CSS font style properties work with the SVG documents, so @font-face can be used for text in SVG files.

EOT

EOT is short for Embedded OpenType Fonts. EOT fonts can be seen as compact versions of OTF fonts that were designed by Microsoft for using them embedded on web pages.

@font-face: Uploading Custom Fonts

@font-face rule lets you add custom fonts to web pages.

This rule frees developers from using the so-called web-safe fonts, and needs to be the first in the CSS file.

For @font-face to work properly, it needs to have the font-family property. Additionally, developers need to indicate the src attribute: a pathway to the font file.

In the example, we call our font comicSans, define the pathway to the font information and apply it to an HTML element:

Example
@font-face {
    font-family: comicSans;       
    src: url(comicSans_light.woff);  
}    

div  {
    font-family: comicSans;  
}

You can add the pathway to the font file in two ways:

  • By specifying the local file: works if users have already already installed the font.
  • By specifying the URL: if local file is unavailable, the CSS sets that the file is automatically downloaded to computers.

Tip: a font name has to start with a lowercase letter because an uppercase character can cause complications in IE.

Making Unique Fonts Go Bold

If you want the bold effect, you need to use the font-weight styling property.

However, the method of using it with the uploaded CSS web fonts is a little bit different. You have to include an additional @font-face rule which will contain descriptors for the bold text. It allows the use of multiple @font-face rules for a single font.

In the example below, you'll see how to add a second @font-face rule. comicsans_bold.woff is another font file, which will contain the bold characters for the Comic Sans font.

Browsers refer to this piece of CSS whenever comicSans is being rendered as font-weight: bold:

Example
@font-face {
    font-family: myFont;       
    src: url(/learn/Greetings-Bold.ttf);  
    font-weight: bold;
}    
@font-face {
   font-family: myFont;
   src: url(/learn/Greetings.ttf);
}

CSS Web Fonts: Useful Tips

  • A modern way of using @font-face is including only WOFF2 and WOFF file formats as it helps you work with fewer files.
  • SVG fonts are no longer recommended as they might cause issues.
Tutorial
CSS3 Features
Syntax
Classes
ID Selectors
Attribute Selectors
Stylesheets
Inline
Internal
External
Box Model
Children Selectors
Pseudo Classes
Pseudo Elements
Variables
Counters
Text
Fonts
Web Fonts
Backgrounds
Background Images
Colors
Gradients
Opacity / Transparency
Shadow Effects
Transitions
Tooltip
Transform
Animations
Layout — Display
Layout — Position
Layout — Float
Layout — Clear
Layout — Horizontal & Vertical Align
Multiple Columns
Introduction
Responsive Web Design — Viewport
Responsive Web Design — Grid View
Responsive Web Design — Media Queries
Responsive Web Design — Flexbox Layout
Responsive Web Design — Images
Responsive Web Design — Videos
Borders
Margin
Padding
Width
Height
Outline
Links
Lists
Tables
Dropdown Menu
Navigation Bar
Images
Image Gallery
Border Images
Forms
Rounded Corners
Buttons
Box-Sizing
Selector Reference
Pagination Examples
Code Examples
CSS3 Browser Support Reference
Functions Reference
Speech Module Reference
Units
Web Safe Font Combinations
Cheat Sheet
:hover
@font-face
@keyframes
@media
align-content
align-items
align-self
all
animation
backface-visibility
background
background-clip
background-color
background-image
background-origin
background-position
background-size
border
border-image
border-radius
border-style
box-shadow
box-sizing
color
columns
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-weight
hanging-punctuation
justify-content
line-height
margin
offset
opacity
order
outline
overflow
padding
perspective
position
resize
tab-size
text-align
text-decoration
text-emphasis
text-transform
text-shadow
transform
transition-property
translate
vertical-align
word-break
word-wrap
z-index