'How to import Google Web Font in CSS file?
I'm working with a CMS which I only have access to the CSS file. So, I can't include anything 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 1:[1]
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en" />
Better to not use @import. Just use the link element, as shown above, in your layout's head.
Solution 2:[2]
Download the font ttf/other format files, then simply add this CSS code example:
@font-face { font-family: roboto-regular;
src: url('../font/Roboto-Regular.ttf'); }
h2{
font-family: roboto-regular;
}Solution 3:[3]
Add the Below code in your CSS File to import Google Web Fonts.
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
Replace the Open+Sans parameter value with your Font name.
Your CSS file should look like:
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body{
font-family: 'Open Sans',serif;
}
Solution 4:[4]
Along with the above answers, do also consider this site; https://google-webfonts-helper.herokuapp.com/fonts
Main Advantage:
- allows you to self-host those google fonts for better response times
Other Advantages :
- choose your font(s)
- choose your character set
- choose your font styles/weight
- choose your target browsers ( modern preferred )
- and u get the CSS snippets ( to add to your css stylesheet ) plus a zip of the font files to include in your project folder ( say css_fonts )
In file 'your_css_theme.css' add
/* open-sans-regular - latin - modern browsers */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local(''),
url('css_fonts/open-sans-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('css_fonts/open-sans-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
body {
font-family: 'Open Sans',sans-serif;
}
Solution 5:[5]
- Just go to https://fonts.google.com/
- Add font by clicking +
- Go to selected font > Embed > @IMPORT > copy url and paste in your .css file above body tag.
- It's done.
Solution 6:[6]
Use the tag @import
@import url('http://fonts.googleapis.com/css?family=Kavoon');
Solution 7:[7]
You can also use @font-face to link to the URLs. http://www.css3.info/preview/web-fonts-with-font-face/
Does the CMS support iframes? You might be able to throw an iframe into the top of your content, too. This would probably be slower - better to include it in your CSS.
Solution 8:[8]
<link href="https://fonts.googleapis.com/css?family=(any font of your
choice)" rel="stylesheet" type="text/css">
To choose the font you can visit the link : https://fonts.google.com
Write the font name of your choice from the website excluding the brackets.
For example you chose Lobster as a font of your choice then,
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"
type="text/css">
Then you can use this normally as a font-family in your whole HTML/CSS file.
For example
<h2 style="Lobster">Please Like This Answer</h2>
Solution 9:[9]
Jus go through the link
https://developers.google.com/fonts/docs/getting_started
To import it to stylesheet use
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
Solution 10:[10]
Googles side changed a bit since 2015.. I had some difficulties finding it so figured to include the new method:
- Scroll down on the desired font page
- click the small plus icon on the side of the font name
- the embed link and other options will appear on the "selected family" dialogue on the right of the web page.
Solution 11:[11]
We can easily do that in css3. We have to simply use @import statement. The following video easily describes the way how to do that. so go ahead and watch it out.
Solution 12:[12]
Go to https://fonts.google.com/ and select your desired font family (you can search by name):
Select the desired variations (weight, italics, etc.):
Click on View selected families button on the top right corner:
Select @import on the right panel to get the code:
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow