How to Import a Font

How to import Google Web Font in CSS file?

Use the @import method:

@import url('https://fonts.googleapis.com/css?family=Open+Sans&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 <style> tags into your stylesheet.

How to import a new font into a project - Angular 5

You need to put the font files in assets folder (may be a fonts sub-folder within assets) and refer to it in the styles:

@font-face {
  font-family: lato;
  src: url(assets/font/Lato.otf) format("opentype");
}

Once done, you can apply this font any where like:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'lato', 'arial', sans-serif;
}

You can put the @font-face definition in your global styles.css or styles.scss and you would be able to refer to the font anywhere - even in your component specific CSS/SCSS. styles.css or styles.scss is already defined in angular-cli.json. Or, if you want you can create a separate CSS/SCSS file and declare it in angular-cli.json along with the styles.css or styles.scss like:

"styles": [
  "styles.css",
  "fonts.css"
],

How can I import local font in Reactjs with Styled Components?

font-family: Segoe Pro Regular; isn't a valid syntax, you should try:

font-family: 'Segoe Pro Regular';

Here is a working example for reference:

import React from 'react';
import ReactDOM from 'react-dom';
import { createGlobalStyle } from 'styled-components';
import MajorMonoTTF from './MajorMonoDisplay-Regular.ttf';

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'Major Mono Display';
    src: url(${MajorMonoTTF}) format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: auto;
  }
  h1 {
    font-family: 'Major Mono Display';
  }
`;

const App = () => (
  <>
    <GlobalStyle />
    <h1>Cool Title</h1>
  </>
);

ReactDOM.render(<App />, document.getElementById('root'));

How to import custom fonts in Next JS?

which ever file you are using as global.css or index.css first import it like this in that file

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

// rest of your css if have 

then goto `tailwind.config.js and use it like this:

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Poppins', 'sans-serif'],
        body: ['Poppins', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

How to import a font installed with NPM?

Apparently you can import it doing the following in the main.js

import '../node_modules/font-roboto/dist/styles/roboto.min.css';

UPDATE: As noted in the comments, the following also works.

import 'font-roboto/dist/styles/roboto.min.css';

How to import Google Fonts to HTML/CSS?

add this before </head>

<style>
body {
  font-family: "Roboto", sans-serif;
}
</style>

---

Related Topics