Google Font API Uses Browser Detection. How to Get All Font Variations for Font-Face

Google Font API uses browser detection. How to get all font variations for font-face

Try downloading atleast these variations of the webfonts : eot , woff , ttf , svg and then you can use them like this for maximum cross browser benefits :

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

See this answer for more information: Link

Static CSS for Google fonts and serving them from your own website (and not from gstatic CDN)

TTF should be enough, but WOFF(2) could save load time where supported.

@font-face {
  font-family: 'font';
  src: url('/font.eot');
  src: url('/font.eot#iefix') format('embedded-opentype'),
       url('/font.woff2') format('woff2'),
       url('/font.woff') format('woff'),
       url('/font.ttf') format('truetype'),
       url('/font.svg#font') format('svg');
}

Google font - how to specific font-family If they have the same name?

This is working, but you are missing the point (.) in front of the two on CSS. See the following snippet:

.one {  font-family: 'Montserrat';  font-size: 11px;  font-weight: 700;}.two {  font-family: 'Montserrat';  font-size: 11px;  font-weight: 400;}

<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'><span class="one">This is text on "one" with weight 700</span><br/><span class="two">This is text on "two" with weight 400</span>

HTML5 offline cache google font api

If you paste that URL into the browser address bar you'll see the files the CSS links to:

http://themes.googleusercontent.com/font?kit=txVk61PTIsDrQQj2fK-76Q
http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0
http://themes.googleusercontent.com/font?kit=xwIisCqGFi8pff-oa9uSVOj-KzHqS7w8OFmqoAXdQwE

Unable to apply Google Font to Ionic2 project

app.scss

@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

// Font Variables
$yanone-kaffeesatz: 'Yanone Kaffeesatz', sans-serif !important;

// Styles
html, body {
  font-family: $yanone-kaffeesatz;
}

local use

assets/custom-fonts/YanoneKaffeesatz-Regular.ttf

on theme/variables.scss

@font-face {
  font-family: 'yanone-kaffeesatz';
  src: url('../assets/custom-fonts/YanoneKaffeesatz-Regular.ttf') format('truetype');
}

---

Related Topics