Specifying Style and Weight for Google Fonts

by

They use regular CSS.

Just use your regular font family like this:

font-family: 'Open Sans', sans-serif;

Now you decide what “weight” the font should have by adding

for semi-bold

font-weight:600;

for bold (700)

font-weight:bold;

for extra bold (800)

font-weight:800;

Like this its fallback proof, so if the google font should “fail” your backup font Arial/Helvetica(Sans-serif) use the same weight as the google font.

Pretty smart 🙂

Note that the different font weights have to be specifically imported via the link tag url (family query param of the google font url) in the header.

For example the following link will include both weights 400 and 700:

<link href="https://stackoverflow.com/questions/7256065/fonts.googleapis.com/css?family=Comfortaa:400,700"; rel="stylesheet" type="text/css">

For CSS2

<link href="https://stackoverflow.com/questions/7256065/fonts.googleapis.com/css2?family=Comfortaa:wght@400;700"; rel="stylesheet" type="text/css">

More Related Contents:

  1. Transparent text cut out of background
  2. Are eot, ttf, and svg still necessary in the font-face declaration?
  3. Same font except its weight seems different on different browsers
  4. Font Awesome 5 Choosing the correct font-family in pseudo-elements
  5. How to import Google Web Font in CSS file?
  6. Wait for fonts to load before rendering web page
  7. What does the forward slash mean in the CSS font shorthand?
  8. Is there any “font smoothing” in Google Chrome?
  9. Downloading a Google font and setting up an offline site that uses it
  10. How can I determine what font a browser is actually using to render some text?
  11. Create webfont with Unicode Supplementary Multilingual Plane symbols
  12. How is font size calculated?
  13. CSS: bolding some text without changing its container’s size
  14. Font size in CSS – % or em? [duplicate]
  15. Multiple font-weights, one @font-face query
  16. Webfont Smoothing and Antialiasing in Firefox and Opera
  17. Webpack “OTS parsing error” loading fonts
  18. Fonts looks different in Firefox and Chrome
  19. Make text height 100% of div?
  20. Non-Standard fonts in web?
  21. How to add fonts to create-react-app based projects?
  22. When setting a font-size in CSS, what is the real height of the letters?
  23. Forcing anti-aliasing using css: Is this a myth?
  24. Font weight turns lighter on Mac/Safari
  25. How to prevent different browsers rendering fonts differently?
  26. How do I style a specific word with CSS in an HTML element?
  27. How to add a custom font to Rails app?
  28. css different font sizes on different families
  29. -webkit-font-smoothing property has no effect in Chrome
  30. Fix custom font line-height with CSS

Leave a Comment