Locally Installed Ttf Overrides Google Fonts

locally installed TTF overrides Google fonts

The answer lies not in your code, but in Google's.

Here's part of the CSS you are requesting:

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: bold;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/0ihfXUL2emPh0ROJezvraLO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}

Key line here is local('Ubuntu Bold'), which asks to load local file if possible.
The simplest solution is to copy all the Google's CSS, paste it in your own CSS, and modify this local name to be, for example, local('Ubuntu Bold NonExisting Name or Something Else'). Such font does not exist and will not replace font loaded by CSS.

P.S. I have not tested this myself. If 0ihfXUL2emPh0ROJezvraLO3LdcAZYWl9Si6vvxL-qU.woff URL is expiring, then you are in a tough spot. Try to see font's licence and consider hosting the font yourself, if preventing local override is a priority.

How can I force my website to use a Google font instead of a locally one with the same name?

If you have the web fonts you could host yourself and give them any name you want in the css and avoid the potential of the local font loading.

For example:

@font-face {
font-family: 'myspecialfont';
src: url('oxygen-webfont.eot');
src: url('oxygen-webfont.eot?#iefix') format('embedded-opentype'),
     url('oxygen-webfont.woff2') format('woff2'),
     url('oxygen-webfont.woff') format('woff'),
     url('oxygen-webfont.ttf') format('truetype'),
     url('oxygen-webfont.svg#oxygenregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {font-family: "myspecialfont", sans-serif;}

Just make sure you're pointing the CSS to the correct path for those files (e.g. if you put them in a fonts folder it'd could be "../fonts/oxygen-webfont")

The main reason people use google is they've optimized it for serving fonts, it takes load off your server, and potentially people have the font cached from google making it load faster. If it's an uncommon font and your server is decent these may negligible.

How to check if Google Font is properly embedded if I have the font on my computer?

Google Fonts always tries to use a locally installed font first. One option is include their @font-face in your own CSS and remove the local() stuff, as explained in this Stackoverflow question.

Google fonts load ignored when font exists locally

Well, if you look at the snippet behind the URL Google gives you to use, it reads (for me -- it appears Google does browser sniffing to not serve Firefox IE-specific workarounds etc):

@font-face {
  font-family: 'Nothing You Could Do';
  font-style: normal;
  font-weight: 400;
  src: local('Nothing You Could Do'), 
       local('NothingYouCouldDo'), 
       url(http://themes.googleusercontent.com/static/fonts/no...YU.woff) format('woff');
}

Lose the two local bits and host the CSS yourself, you should be better.

How to make font-feature-settings work with Google fonts

Your @font-face rule has some errors:

The url argument expects an actual font file URL like

"fonts.gstatic.com/s/sourcesanspro/v2/...fontfileName.woff2"

Update: Get file URLs from css URL

https://fonts.googleapis.com/css2?family=Source+Sans+Pro

Will return a css containing several @font-face rules for different styles/weights.

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
}

Unfortunately, by default google fonts will return the most modern font format supported by your browser – quite likely woff2.

Besides, these font files won't include font-features (as commented here).

How to get the complete font (including all glyphs and features)

• Other CDNs provide the complete font like jsDelivr in all available formats
• Download the whole font family in google fonts UI via "Download family" button (e.g Source Sans Pro)

Drawbacks

These files will be way bigger in file size.

If your application does not necessarily need truetype, you should at least switch to the smaller woff2 format.

Updated example

(Compare the lowercase g glyphs)

@font-face {
  font-family: "SourceSansProFeat";
  src: url("https://cdn.jsdelivr.net/npm/source-sans-pro@3.6.0/TTF/SourceSansPro-Regular.ttf")
    format("truetype");
  font-style: normal;
  font-stretch: normal;
  font-weight: 400;
}

@font-face {
  font-family: "SourceSansProFeat";
  src: url("https://cdn.jsdelivr.net/npm/source-sans-pro@3.6.0/TTF/SourceSansPro-Bold.ttf")
    format("truetype");
  font-style: normal;
  font-stretch: normal;
  font-weight: 700;
}

body {
  font-family: "SourceSansProFeat";
}

h1,
.h1 {
  font-style: normal;
  font-stretch: normal;
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.feature {
  -webkit-font-feature-settings: "ss01" on, "ss02" on, "ss03" on;
  font-feature-settings: "ss01" on, "ss02" on, "ss03" on;
}

<h1 class="feature">Hamburglefons (alternate glyphset)</h1>
<h1>Hamburglefons (standard glyphs)</h1>
<p>Quick brown fox jumps over the lazy dog <span class="feature">dog</span></p>

How to import and use a custom font in a material-ui theme?

Instead of installing via npm, you can just first load CSS file.

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

Import this CSS file

import './assets/css/yellowtail.css';

Now you don't need to use any @font-face. This can be used with font families like normal.

tailwind use font from local files globally

You can customize Tailwind if it was installed as a dependency to your project using npm install tailwindcss

Steps:

• copy the downloaded font and place it inside a fonts folder inside your project.

• run npx tailwind init, to generate an empty tailwind.config.js

• Inside tailwind.config.js add fontFamily inside extend and specify the font family to override (Tailwind's default family is sans). Place the newly added font family at the beginning (order matters)

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Roboto', 'Helvetica', 'Arial', 'sans-serif']
      }
    },
  },
  variants: {},
  plugins: []
}

Important: Using extend will add the newly specified font families without overriding Tailwind's entire font stack.

Then in the main tailwind.css file (where you import all of tailwind features), you can import your local font family. Like this:

@tailwind base;
@tailwind components;

@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), url(./fonts/Roboto-Regular.ttf) format('ttf');
}

@tailwind utilities;

Now recompile the CSS. If you're following Tailwind's documentation, this is typically done using postcss:

postcss css/tailwind.css -o public/tailwind.css

If you're not using postcss, you can run:

npx tailwindcss build css/tailwind.css -o public/tailwind.css

Your newly added font family should now be rendered.

---

Related Topics