Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

StencilJS Custom Fonts not working #2072

Closed
karsvaniersel opened this issue Dec 10, 2019 · 10 comments
Closed

StencilJS Custom Fonts not working #2072

karsvaniersel opened this issue Dec 10, 2019 · 10 comments
Labels
ionitron: stale issue This issue has not seen any activity for a long period of time

Comments

@karsvaniersel
Copy link

Stencil version:

 @stencil/core@1.7.5

I'm submitting a:

[x] bug report
[ ] feature request
[] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

Importing a custom font with the path: url(assets/fonts/FONTNAME.woff) However the Font Family does not appear. It seems like it just cannot get the path correct? I have tried a lot, ../assets, ../src/assets/ /dist/collection/assets etc, still the font is not being applied to my text.

Expected behavior:

The CSS using font-family: CUSTOMFONT would load and the text would have the custom font given.
@ionitron-bot ionitron-bot bot added the triage label Dec 10, 2019
@richrd richrd mentioned this issue Jan 14, 2020
Closed
3 tasks
@richrd
Copy link

richrd commented Feb 3, 2020 •
edited

Sorry to bring bad news but as far as I know, there's currently no way to load custom fonts at all from within a shadow DOM. If you want to hack around the issue you can inject the required css into the <head> tag on component load.

Chrome bug report https://bugs.chromium.org/p/chromium/issues/detail?id=336876

@ChrisLang
Copy link

hi, any work arounds for this

@richrd
Copy link

richrd commented Feb 19, 2020

You can dynamically inject your CSS into the <head> tag as I suggested.
Something like this should work:

    componentDidLoad() {
      // Add custom font to page DOM since font-face doesn't work within Shadow DOM.
      const fontCssUrl = 'https://example.com/font.css';
      let element = document.querySelector(`link[href="${fontCssUrl}"]`);

      // Only inject the element if it's not yet present
      if (!element) {
        element = document.createElement('link');
        element.setAttribute('rel', 'stylesheet');
        element.setAttribute('href', fontCssUrl);
        document.head.appendChild(element);
      }
    }

@musangowope musangowope mentioned this issue Nov 10, 2021
Closed
@pranav-js
Copy link

pranav-js commented Feb 8, 2022 •
edited

how to include google fonts here now, limited to particular web component? any help please? :(

Update:

@richrd it worked! tysm

@bleuscyther
Copy link

bleuscyther commented Jun 19, 2022 •
edited

There seems to be another workaround:
google/material-design-icons#1165 (comment)

Basically, you put the same @import url('-------'); in both app.css and the my-components.css

roedoejet added a commit to ReadAlongs/Studio-Web that referenced this issue Mar 8, 2023
@roedoejet
feat(fonts): use bc sans by default
e301861 
load from shadow dom as per ionic-team/stencil#2072

also removes requirement for parent applications to load google fonts separately
@roedoejet roedoejet mentioned this issue Mar 8, 2023
Merged
@ChrisMeye
Copy link

ChrisMeye commented May 26, 2023 •
edited

By the way this is not a StencilJS bug but for me those solutions work flawless. I wrote a detailed solution here:
https://stackoverflow.com/a/57623658/8196542

@SyedAli310
Copy link

SyedAli310 commented Jan 11, 2024 •
edited

@richrd , This workaround : #2072 (comment), also works only if shadow prop in the Component decorator is false. Any way to make it work with shadow DOM set to true

@christian-bromann
Copy link
Member

Thanks @ChrisMeye for this in depth solution, I will raise a PR for the Stencil docs to provide more guidance for our general audience.

@christian-bromann christian-bromann self-assigned this Jan 13, 2024
@christian-bromann
Copy link
Member

It looks like Stencil already recommends using global styles for things like:

  • Theming: defining CSS variables used across the app
  • Load fonts with @font-face
  • App wide font-family
  • CSS resets

@ChrisMeye it seems like this matches what you have outlined in Option 1. In what circumstances are Option 2 and Option 3 better alternatives than using global styles? Any feedback would be appreciated!

@christian-bromann christian-bromann added the ionitron: stale issue This issue has not seen any activity for a long period of time label Mar 18, 2024
@christian-bromann christian-bromann removed their assignment Mar 18, 2024
@ionitron-bot Ionitron Bot
Copy link

ionitron-bot bot commented Apr 17, 2024

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!

@ionitron-bot ionitron-bot bot closed this as completed Apr 17, 2024
@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Apr 17, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
ionitron: stale issue This issue has not seen any activity for a long period of time
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@christian-bromann @ChrisLang @bleuscyther @richrd @ChrisMeye @karsvaniersel @SyedAli310 @pranav-js