How to add a custom font into Html using CSS?

Dung Do Tien May 27 2020 582

I have a small website, I don't want to use some default font family of browser such as Arial, Roboto....

I have download Nunito font from google but How to import a custom font into Html using CSS? and what is the best way to do and help improve the performance load time of the website?

Thanks for any ideas.

Have 1 answer(s) found.
  • M

    Marry Christ May 27 2020

    1. How to add custom font into Html using CSS?

    Answer: using @font-face of css3 to import font. See an example below:

    @font-face {
    font-family: 'Roboto';
    src: url('Roboto-Regular.eot');
    src: local('Roboto Regular'), 
        url('../font/Roboto-Regular.eot?#iefix') format('embedded-opentype'), 
        url('../font/Roboto-Regular.woff') format('woff'), 
        url('../font/Roboto-Regular.ttf') format('truetype'), 
        url('../font/Roboto-Regular.svg') format('svg');
    font-weight: 400;
    font-style: normal;
}

    font-family: You can type any name you want.

    url: Set to the relative path of your site.

    How to use this custom font?

    - You can use normally like the default font. For example:

    h1{
   font-family: "Roboto";
}

     

    2. How to customize load font for fast performance?

    we have 2 problems that need to resolve with load a custom font.

    2.1 Block display text while loading the font file

    Text of your web page will not display while loading custom font file, You need display text with default font while loading custom font. To resolve this problem you can add font-display: swap property CSS into your custom font:

    @font-face {
    font-family: 'Roboto';
    src: url('Roboto-Regular.eot');
    ..................................
    font-style: normal;
    font-display: swap;
}

    2.2 Preload font file.

    If you preload the font file, you will help increase the performance of your website. You can see an example below :

    <link rel="preload" href="../font/Roboto-Regular.woff" as="font" type="font/woff" crossorigin />

    Push this code into the inside of the <head> tag.

    You can refer the article below for more custom CSS performance:

    Add css to html for best performance.

Related Q&A May You Like

  1. How to scroll to an element of html using Jquery?
  2. How to center text of <p> tag html using CSS?
  3. how to remove bullets from ul Html tag in css?
  4. How do I change the background opacity in CSS?
  5. How can I change the font size for labels in HTML?
  6. What is the difference between class and id selector in CSS?
  7. How to set value for ngbdatepicker in angular 8
  8. Python: can't open file 'setup.py': [errno 2] no such file or directory
  9. How to create a group of css multiple classes same style?
  10. IndentationError: unindent does not match any outer indentation level in Python
  11. ERROR 1819 (HY000): Your password does not satisfy the current policy requirements in MySQL
  12. ImportError: No module named MySQLdb in Python Django
  13. Git error fatal: cannot do a partial commit during a merge
  14. PermissionError: [Errno 13] Permission denied in Python
  15. The operation failed as details for project could not be loaded in Asp.net Core
Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Most Quizs Popular

Start Test

Javascript - Functions
Start Test

Asp.Net Core - Exam test 01
Start Test

Asp.Net Core - Exam test 02
Start Test

C# - Level Beginner

Popular Tips

This site uses cookies so that we can remember you and understand how you interact with our website. This allows us to improve and customize your browsing experience. See our Cookies Policy.
X Close