How to Use Google Fonts in CSS: Importing Google Fonts to CSS Files

PDF download Download Article
PDF download Download Article

If you're wondering how to import Google's web fonts into your CSS code, you've come to the right place. To start using Google Fonts on your website, you'll just need to add some simple code you generate on the Google Fonts website to your existing style sheet. We'll show you how to use the @import class in CSS to display Google web fonts on your website.

Steps

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4f\/129590081.jpg\/v4-460px-129590081.jpg","bigUrl":"\/images\/thumb\/4\/4f\/129590081.jpg\/v4-728px-129590081.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    Go to https://fonts.google.com and click the font you want to use. [1] Scroll down the list to view all styles, and then click ' Select this style on the style you like most. [2]
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ea\/12959008-2.jpg\/v4-460px-12959008-2.jpg","bigUrl":"\/images\/thumb\/e\/ea\/12959008-2.jpg\/v4-728px-12959008-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    Under "Use on the web" on the right side of the page, select the circle next to "@import". Now you'll see some code appear in the box. Just copy the part of the code between the <style></style> tags, e.g., @import url(' https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap' ); . [3]
    Advertisement
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/45\/12959008-3.jpg\/v4-460px-12959008-3.jpg","bigUrl":"\/images\/thumb\/4\/45\/12959008-3.jpg\/v4-728px-12959008-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    If you're using a separate style sheet, open the .css file that you want to edit in your text editor. If you're doing in-line CSS, open the HTML file in which you want to use the font.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/45\/12959008-4.jpg\/v4-460px-12959008-4.jpg","bigUrl":"\/images\/thumb\/4\/45\/12959008-4.jpg\/v4-728px-12959008-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    If you're editing a separate CSS file, paste the copied @import information to the top of the sheet—the very first line(s). [4] If you're working in an HTML file, paste the copied code between your <style></style> tags, which should be in your header. [5]


    If you're working with an HTML file, your font information should look something like this:

     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Title </ 
 title 
 > 
 < 
 style 
 > 
 @ 
 import 
 url 
 ( 
 'https://fonts.googleapis.com/css2?family=Lora&display=swap' 
 ) 
 ; 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
Lorem Ipsum </ 
 h1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >

    If you're working in a separate style sheet, you'll have something like this as the first line of your CSS file:

     @ 
 import 
 url 
 ( 
 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap' 
 ) 
 ;

  5. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0d\/12959008-5.jpg\/v4-460px-12959008-5.jpg","bigUrl":"\/images\/thumb\/0\/0d\/12959008-5.jpg\/v4-728px-12959008-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    Now that you've added the code that makes the font available for use, you can define it in styles, such as for the body and h1 elements. For example, if you want to make your standard body text the Lora font at 20px, you could enter this into your style sheet or between your style tags: [6] 
     body 
 { 
 font-family 
 : 
 'Lora' 
 ; 
 font-size 
 : 
 20 
 px 
 ; 
 }
    • You can change the color and text appearance of your font in the "color" and "font-weight" properties.
    • If you want to add more text effects, check out Google's list of supported text effects at https://developers.google.com/fonts/docs/getting_started . There are tons of cool effects, including fire-animation, neon, and anaglyph!
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9e\/12959008-6.jpg\/v4-460px-12959008-6.jpg","bigUrl":"\/images\/thumb\/9\/9e\/12959008-6.jpg\/v4-728px-12959008-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    Once you add the font to some CSS declarations and save your file, you're all set! Load up the page in your web browser—the browser will fetch the Google fonts and display them with the properties you specified.
    • You can include more than one Google font in your CSS code at a time. Just be aware that since the fonts are being imported into your CSS, using multiple fonts can impact loading speed. If you want to include multiple Google fonts, you'll just need to copy the code for each font you want to use and paste it into your code the same way you did here.
    7. Advertisement

Expert Q&A

Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Submit
      Thanks for submitting a tip for review!

      You Might Also Like

      How to
      Sign Out of Your Google Account on All Devices at Once
      How to Delete Google Photos without Deleting Them on Your Phone
      How to Disable Google Safe Search
      How to Sign Up for a New Google Voice Phone Number
      2 Simple Ways to Unsync Google Photos
      How to Restore Google Authenticator if You Lost or Reset Your Phone
      How to Use Google Translate: Complete Beginner's Guide
      2 Easy Ways to Permanently Delete (or, Hide) Your YouTube Channel
      How to
      Fix the "Google Play Store Has Stopped" Error
      How to Use Dark Mode in Google Docs: Easy Steps for Desktop & Mobile
      Reverse Image Search in Google Lens: Android, iPhone, & Desktop
      Easy Ways to Find Backed Up Photos on Google: 3 Methods
      How to Delete Duplicate Photos from your Google Storage
      How to Make a Free Website with Google Sites: Step-by-Step Guide
      Advertisement

      References

      1. ↑ https://www.freecodecamp.org/news/how-to-use-google-fonts-in-your-next-web-design-project-e1ad48f1adfa/
      2. ↑ https://fonts.google.com
      3. ↑ https://www.freecodecamp.org/news/how-to-use-google-fonts-in-your-next-web-design-project-e1ad48f1adfa/
      4. ↑ https://www.freecodecamp.org/news/how-to-use-google-fonts-in-your-next-web-design-project-e1ad48f1adfa/
      5. ↑ https://developers.google.com/fonts/docs/getting_started
      6. ↑ https://fonts.google.com/knowledge/using_type/using_web_fonts

      About This Article

      Article Summary X

      1. Get the code for the font.
      2. Open your CSS document with a text editor.
      3. Paste the copied line into your code.
      4. Save your CSS file.

      Did this summary help you?
      In other languages
      Thanks to all authors for creating a page that has been read 32,573 times.

      Is this article up to date?

      Advertisement