0

I want to create a "Sign in with Google" button. For this I installed this module npm i roboto-fontface and added this line in angular.json 

"styles": [
          {
            "input": "src/theme/variables.scss"
          },
          {
            "input": "src/global.scss"
          },
          {
            "input": "./node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-medium.scss"
          }
        ]

Suddenly everything is in that font now! How can I restrict it to only specific components? Is this even the correct approach?

Ero Stefano
  • 556
  • 2
  • 9
  • 27
  • 1
    If for example global.scss has `body { font-family: something }` and then somewhere in the roboto scss it has the same, it's overriding your original since its lower in the order of inception. Start by opening your developer tools and stepping through the inheritance to see where it's getting set and either remove it and then specify it explicitly where it's used or override it. Without seeing a way to reproduce the issue though that's about as helpful as we can be. – Chris W. Feb 19 '20 at 22:00
  • I will check the inheritance tree asap. You said to specify it where I explicitly need it. How can I achieve this? – Ero Stefano Feb 20 '20 at 16:04
  • 1
    For your instance it would be something like `.different-font { font-family: whatever-font-name }` in your css and `` in the html. Or just inline `` – Chris W. Feb 20 '20 at 16:55

0 Answers0