Importing Google Web Fonts in CSS Files
When working with content management systems (CMSs) where access to the document head is limited, importing Google Web Fonts directly into the CSS file becomes necessary. Here's how to achieve this:
Using the @import Method
The @import method allows you to import external CSS files into your CSS file. To import a Google Web Font, use the following syntax:
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');Replace "Open Sans" with the name of your desired font. If the font name has multiple words, URL-encode them by adding a " " sign between each word.
Placing the @import Directive
Ensure that the @import directive is placed at the very top of your CSS file, before any style rules.
Using the Google Fonts API
Google Fonts provides an easy way to generate the @import directive for your font. Choose your desired font, click the ( ) icon, and expand the "1 Family Selected" container.
In the "Customize" tab, select desired options. In the "Embed" tab, click "@import" under "Embed Font." Copy the CSS between the