Giter Site home page Giter Site logo

Comments (5)

borstessi avatar borstessi commented on June 11, 2024 1

it is somehow related to the fontWeight, if i apply fontWeight 400 the font is loaded correctly

from gluestack-ui.

Viraj-10 avatar Viraj-10 commented on June 11, 2024

Hey @borstessi, Thanks for reporting issue. We will have a look.

from gluestack-ui.

tedcu avatar tedcu commented on June 11, 2024

Just here to report that we have the same issue. Applying fontWeight: 400 on config fixes the issue.

from gluestack-ui.

jonra1993 avatar jonra1993 commented on June 11, 2024

I have a similar issue. I am working in Android and Expo. Despite I have imported the fonts using UseFont in the expo and changed the tokens the fonts are not applied to the global theme.

import { config as defaultConfig } from "@gluestack-ui/config";
import { createConfig } from "@gluestack-ui/themed";

export const themeConfig = createConfig({
  ...defaultConfig,  
  tokens: {
    ...defaultConfig.tokens,
    fontSizes: {
      ...defaultConfig.tokens.fontSizes,
      newFontSize: 90,
    },
    fonts: {
      heading: 'Futura-Bold',
      body: 'Futura-Medium',
      mono: 'Futura-Book',
    },
    colors: {
      ...defaultConfig.tokens.colors,
      primary0: "#E5F1FB",
      primary50: "#e2ebff",
      primary100: "#b2c3ff",
      primary200: "#809bff",
      primary300: "#4e72fe",
      primary400: "#204afd",
      primary500: "#0b32e4",
      primary600: "#0426b2",
      primary700: "#001b80",
      primary800: "#001871",
      primary900: "#00051f",
      primary950: "#000711",
      brandPrimary: '#001871',
      brandSecondary: '#007aff',
      brandInfo: '#C0E7F7',
      brandSuccess: '#4DD298',
      brandDanger: '#F58BA0',
      brandWarning: '#FA8202',
      brandDark: '#000',
      brandLight: '#a9a9a9',
    }
  }  
});

When I do this the font is not applied,

<Text style={{ alignSelf: "center", marginTop: 500}}>Styling! :D Hooray!</Text>

The only way it works is forcing the font in each component like this.

<Text style={{fontFamily: "Futura-Bold", alignSelf: "center", marginTop: 500}}>Styling! :D Hooray!</Text>

I am using

    "@gluestack-style/react": "^1.0.52",
    "@gluestack-ui/config": "^1.1.16",
    "@gluestack-ui/themed": "^1.1.22",
    "expo": "~50.0.14",
    "expo-font": "~11.10.3",

from gluestack-ui.

pgill-rbi avatar pgill-rbi commented on June 11, 2024

Same issue, setting fontWeight to 400 seems to fix
I guess the fontWeight's don't actually do anything

from gluestack-ui.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.