Skip to content
Fix Code Error

How to import Google Web Font in CSS file?

March 13, 2021 by Code Error
Posted By: Anonymous

I’m working with a CMS which I only have access to the CSS file. So, I can’t include anything thing in the HEAD of the document. I was wondering if there was a way to import the web font from within the CSS file?

Solution

Use the @import method:

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

Obviously, “Open Sans” (Open+Sans) is the font that is imported. So replace it with yours. If the font’s name has multiple words, URL-encode it by adding a + sign between each word, as I did.

Make sure to place the @import at the very top of your CSS, before any rules.

Google Fonts can automatically generate the @import directive for you. Once you have chosen a font, click the (+) icon next to it. In bottom-left corner, a container titled “1 Family Selected” will appear. Click it, and it will expand. Use the “Customize” tab to select options, and then switch back to “Embed” and click “@import” under “Embed Font”. Copy the CSS between the <style> tags into your stylesheet.

Answered By: Anonymous

Related Articles

  • Issue with iron-ajax request
  • How to use html template with vue.js
  • easiest way to extract Oracle form xml format data
  • Self-hosted fonts using NextJS
  • What is the copy-and-swap idiom?
  • Navbar not filling width of page when reduced to mobile view
  • Plugin…
  • VUE Error when run test unit
  • After a little scroll, the sticky navbar just is not…
  • How to add fonts to create-react-app based projects?
  • Downloading jQuery UI CSS from Google's CDN
  • Active tab issue on page load HTML
  • Having trouble with my nav bar/header, It used to…
  • How do i arrange images inside a div?
  • Sort table rows In Bootstrap
  • How do i update a javascript variable as its value changes?
  • Adobe XD to responsive html
  • python 3.2 UnicodeEncodeError: 'charmap' codec can't…
  • how to use canvas in JavaScript flappy bird code
  • Jquery fadeToggle Trouble
  • I cant get my type writer heading to the center of my code
  • Azure Sql : Unable to Replace HTML String
  • How to parse an RSS feed using JavaScript?
  • Unresponsive hamburger icon in HTML
  • JavaScript gives NaN error on the page but variable…
  • C program that replace word in sentence to another word
  • How to create a game over screen for a basic HTML/JS game?
  • Javascript text animation not triggering
  • Failed to authenticate on SMTP server error using gmail
  • Why doesn't Python have a sign function?
  • Form field border-radius is not working only on the…
  • Do you (really) write exception safe code?
  • Best way to replace multiple characters in a string?
  • Is it possible to apply CSS to half of a character?
  • How can I import external CSS files into my Ember app?
  • Vue Cli 3 Local fonts not loading
  • without template, need to render not return json
  • How to use the new Material Design Icon themes:…
  • How do i load custom fonts in polymer 2.x
  • How can I pass a wct test while rearranging children…
  • why is my website is pushed to the left when…
  • How to remove element from array in forEach loop?
  • javascript .replace and .trim not working in vuejs
  • How do you use custom fonts with TailwindCSS and NuxtJS?
  • Javascript validate all checkboxes are selected
  • How to solve Internal Server Error in Next.Js?
  • Using fonts with Rails asset pipeline
  • How to stretch the div to all the height of the page?
  • How can I extract embedded fonts from a PDF as valid…
  • Why doesnt my table sort my div variable in numerical order?
  • How to set width of mat-table column in angular?
  • How to host google web fonts on my own server?
  • Onclick, the button moves down, why can that due to?
  • How to Fix hover not working after JS script…
  • How to add fade animation for this tab
  • What causes this bug and how can I fix it?
  • How to change the active tab in a responsive…
  • TypeError: argument of type 'NoneType' is not iterable
  • Specifying Style and Weight for Google Fonts
  • Docker compose fails to start a service with an…
  • Creating an dynamic array, but getting segmentation…
  • Why does the function named "traverse" not work on my code?
  • bash string compare to multiple correct values
  • binding backbone form view UIto model change to…
  • What is the origin of foo and bar?
  • Why is it that "No HTTP resource was found that…
  • C++ template,typename and operator
  • How to use Apple's new San Francisco font on a webpage
  • How to get Google fonts (Varela Round) to work in…
  • This page didn't load Google Maps correctly. See the…
  • Import Python Script Into Another?
  • How to add multiple font files for the same font?
  • problem with client server unix domain stream…
  • Valid values for android:fontFamily and what they map to?
  • no match for ‘operator
  • moving text and image in nav
  • (Devanagari Font) How to ensure all parts of the…
  • Downloading a Google font and setting up an offline…
  • Import CSS file with Fonts in VueJS
  • How to use Google Web Fonts in VueJS app?
  • JavaScript TypeError: Cannot read property 'style' of null
  • Fix top buttons on scroll of list below
  • Aurelia CLI font-awesome
  • Bootstrap 4 - Glyphicons migration?
  • Best practice multi language website
  • Google Forms file upload complete example
  • Google Fonts API and Polymer: CORS issues
  • Vue.js ignore html in textarea
  • How do I use .woff fonts for my website?
  • Is there any "font smoothing" in Google Chrome?
  • Dynamically load external css resources model side
  • Custom font in Next.js + Tailwind: no error, but wrong font
  • Changing CSS variable based on the parent class ||…
  • How do I keep only the first map and when the game…
  • Multiple word search using trie in dart
  • How to make Google Fonts work in IE?
  • jQuery Mobile: document ready vs. page events
  • Daisy is overlapping the other contents of the div
  • Backbone tutorial: model.destroy + remove and…
  • CSS animation as a Google Map Marker (Polymer 1.0)?

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

How to set time delay in javascript

Next Post:

How do I add files and folders into GitHub repos?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error