What is Google Fonts?
B
A service that provides free fonts for websites
Analysis & Theory
Google Fonts is a free service that offers web-safe, hosted fonts for use on websites.
How do you include a Google Font in an HTML file?
A
Using @font-face in CSS
B
By importing the font from a local file
C
By linking the font using a `<link>` tag in the HTML head
D
By typing the font name in the body
Analysis & Theory
Google Fonts are usually added via a `<link>` tag in the HTML `<head>` section.
Which of the following is a correct `<link>` tag for a Google Font?
A
<link href='https://fonts.google.com/Poppins'>
B
<link href='google.com/fonts/poppins.css'>
C
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins&display=swap'>
D
<font href='poppins.css'>
Analysis & Theory
This is the standard link format used to load a Google Font via its API.
After linking a Google Font, how do you use it in CSS?
C
font-family: 'Poppins', sans-serif;
Analysis & Theory
Use `font-family: 'FontName', fallback;` to apply the Google Font in CSS.
What is the purpose of `display=swap` in the Google Fonts URL?
B
It swaps the font color
C
It makes fonts load faster and avoids invisible text
D
It changes font automatically on hover
Analysis & Theory
`display=swap` ensures text is shown with a fallback font until the Google Font loads.
Which Google Font is commonly used for a clean, modern look?
Analysis & Theory
`Roboto` is a widely-used modern sans-serif font available on Google Fonts.
Can you use multiple font weights from Google Fonts?
A
No, only one weight is allowed
B
Yes, by specifying them in the URL
C
Only if using JavaScript
D
Yes, but only bold and normal
Analysis & Theory
Multiple weights (e.g., 400, 700) can be loaded by including them in the Google Fonts URL.
Which tag do you need in HTML to use a Google Font?
Analysis & Theory
`<link>` is used to import Google Fonts from the web into your HTML.
Which of the following is a correct way to use Google Fonts in CSS with `@import`?
A
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
B
@import fonts.google/Roboto;
D
@font: GoogleFont(Roboto);
Analysis & Theory
The correct `@import` rule includes the full Google Fonts URL inside `url()`.
What should you always include after a Google Font in `font-family`?
B
A generic fallback like `sans-serif` or `serif`
C
The same font name again
Analysis & Theory
Always include a generic font family (e.g., `sans-serif`) as a fallback.