How to import Google Web Font in CSS file

Question

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

User · Answer

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

User · Answer

Use the tag  import   import url  http   fonts googleapis com css family Kavoon

User · Answer

Use the  import method    import url  https   fonts googleapis com css family Open Sans amp 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  lt style gt  tags into your stylesheet

User · Answer

Download the font ttf other format files  then simply add this CSS code example    x000D   x000D   font-face   font-family  roboto-regular   x000D      src  url     font Roboto-Regular ttf       x000D  h2  x000D   font-family  roboto-regular  x000D    x000D   x000D   x000D

User · Answer

lt link rel  stylesheet  href    fonts googleapis com css family Open Sans 300 400 600 700 amp amp lang en    gt    Better to not use  import  Just use the link element  as shown above  in your layout s head

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   https   www youtube com watch v wlPr6EF6GAo

User · Answer

lt link href  https   fonts googleapis com css family  any font of your  choice   rel  stylesheet  type  text css  gt    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    lt link href  https   fonts googleapis com css family Lobster  rel  stylesheet   type  text css  gt    Then you can use this normally as a font-family in your whole HTML CSS file   For example   lt h2 style  Lobster  gt Please Like This Answer lt  h2 gt

User · Answer

Along with the above answers  do also consider this site  https   google-webfonts-helper herokuapp com fonts  Advantage    allows you to self-host those google fonts for better response times choose your font s  choose your character set choose your font styles weight choose your target browser and u get the CSS snippets   add to your css stylesheet   plus a zip of the  font files to include in your project   E g your theme css   font-face        font-family   Open Sans        font-style  normal        font-weight  400      src  local  Open Sans Regular    local  OpenSans-Regular                 url  css fonts open-sans-v15-latin-regular woff2   format  woff2                  url  css fonts open-sans-v15-latin-regular woff   format  woff        body        font-family   Open Sans  sans-serif

[css] How to import Google Web Font in CSS file?

Examples related to css

Examples related to fonts

Examples related to google-webfonts