@font-face rules

Word Count: 277
  • Post category:Codings
  • Post last modified:2021-06-13

Using @font-face rules for custom fonts.

Note that all font-family values are the same. Style and weight are set to the values corresponding to the font files.

@font-face {
    font-family: 'mont';
    src: url( 'fonts/Montserrat-Bold.ttf' );   
    font-style: normal;
    font-weight: 700;               
}
@font-face {
    font-family: 'mont';
    src: url( 'fonts/Montserrat-Regular.ttf' );   
    font-style: normal;
    font-weight: 400;               
}
@font-face {
    font-family: 'mont';
    src: url( 'fonts/Montserrat-BoldItalic.ttf' );   
    font-style: italic;
    font-weight: 700;                 
}
@font-face {
    font-family: 'mont';
    src: url( 'fonts/Montserrat-RegularItalic.ttf' );   
    font-style: italic;
    font-weight: 400;          
}

Download resources for font files:

A note about font weight: 

    https://www.webtype.com/info/articles/fonts-weights/ 

One of the challenges with web fonts is that most web browsers do not properly support font weights other than normal & bold. The following chart describes the possible mappings of weights to the numeric definitions:         

100    Extra Light or Ultra Light

200    Light or Thin

300    Book or Demi

400  Regular, Normal, Plain, Roman, Standard

500    Medium

600    Semibold, Demibold

700    Bold

800    Black, Extra Bold or Heavy

900    Extra Black, Fat, Poster or Ultra Black

Upload font files to WordPress Media Library

Add the following lines to wp-config.php at the root directory.

define( 'ALLOW_UNFILTERED_UPLOADS', true );
// REMOVE this line after the file is uploaded.

If the above wp-config approach does not work, a filter should also be added to functions.php.

/** Allow upload of font files */
function custom_myme_types($mime_types){
    $mime_types['ttf'] = 'application/x-font-ttf';
    return $mime_types;
}
add_filter('upload_mimes', 'custom_myme_types', 1, 1);

Tags: ,