It changed the title font on youtube

[Roki100]

Describe the bug On my end the youtube title font changes when using this extension

To Reproduce Steps to reproduce the behavior:

1. install the extension and enable it
2. open a youtube video with flag in the name

Screenshots before: after:

Chrome version: opera gx 101.0.4843.74

Additional context Using other extension for the same purpose doesnt cause this, but i prefer twemoji look so this one's a better pick for me, but yeah, incosistent title fonts are bugging me

[matthijs110]

Hi @Roki100, sorry for the long wait!

I understand the issue, but currently the extention does not support Opera. Its primary use case is Chrome and Edge as these are Chromium based browsers. I am willing to apply easy/small fixed though.

As far as I can see on your screenshots, the font family matches exactly, with the font-weight being the only difference. If you could provide some snippets with the applied CSS in both scenarios, I could take a look into what might cause this. But as I said, I don't support Opera the moment.

PS: I watch Bald too ;-)

[Roki100]

Hi @matthijs110, Opera is also Chromium based for years so that shouldn't really be the cause of the issue, but anyway, i am not sure how can i send css snippets, so i'll provide html of the title as it may be enough:

With extension enabled:

<div id="title" class="style-scope ytd-watch-metadata" style="font-family: &quot;Twemoji Country Flags&quot;, Roboto, Arial, sans-serif; display: flex; justify-content: space-between; align-items: flex-start;">

    <h1 class="style-scope ytd-watch-metadata" style="font-family: &quot;Twemoji Country Flags&quot;, &quot;YouTube Sans&quot;, Roboto, sans-serif; display: flex;"><span id="categoryPillParent"><span id="categoryPill"><span class="sponsorBlockCategoryPill" aria-label="Cały film jest oznaczony jako ta kategoria i jest za bardzo zintegrowany, aby można było go podzielić" style="display: none;"><span class="sponsorBlockCategoryPillTitleSection"><img class="sponsorSkipLogo sponsorSkipObject" src="chrome-extension://mnjggcdmjocbbbhaepdhchncahnbgone/icons/IconSponsorBlocker256px.png"><span class="sponsorBlockCategoryPillTitle"></span></span><img src="chrome-extension://mnjggcdmjocbbbhaepdhchncahnbgone/icons/close.png" class="categoryPillClose"></span></span></span>
      <span class="cbCustomTitle" style="display: none;"></span><yt-formatted-string force-default-style="" class="style-scope ytd-watch-metadata" style="display: -webkit-box !important;"><span dir="auto" class="style-scope yt-formatted-string">This Is Mongolia! 🇲🇳 ( Asia’s Nation Of Madlads )</span></yt-formatted-string>
    </h1>

  <div class="cbTitleButtonContainer" style="height: 28px;"><button class="cbSubmitButton cbButton" draggable="false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M14.1 7.1l2.9 2.9L6.1 20.7l-3.6.7.7-3.6L14.1 7.1zm0-2.8L1.4 16.9 0 24l7.1-1.4L19.8 9.9l-5.7-5.7zm7.1 4.3L24 5.7 18.3 0l-2.8 2.8 5.7 5.7z"></path>
</svg></button></div></div>

With extension disabled:

<div id="title" class="style-scope ytd-watch-metadata" style="display: flex; justify-content: space-between; align-items: flex-start;">

    <h1 class="style-scope ytd-watch-metadata" style="display: flex;"><span id="categoryPillParent"><span id="categoryPill"><span class="sponsorBlockCategoryPill" aria-label="Cały film jest oznaczony jako ta kategoria i jest za bardzo zintegrowany, aby można było go podzielić" style="display: none;"><span class="sponsorBlockCategoryPillTitleSection"><img class="sponsorSkipLogo sponsorSkipObject" src="chrome-extension://mnjggcdmjocbbbhaepdhchncahnbgone/icons/IconSponsorBlocker256px.png"><span class="sponsorBlockCategoryPillTitle"></span></span><img src="chrome-extension://mnjggcdmjocbbbhaepdhchncahnbgone/icons/close.png" class="categoryPillClose"></span></span></span>
      <span class="cbCustomTitle" style="display: none;"></span><yt-formatted-string force-default-style="" class="style-scope ytd-watch-metadata" style="display: -webkit-box !important;"><span dir="auto" class="style-scope yt-formatted-string">This Is Mongolia! 🇲🇳 ( Asia’s Nation Of Madlads )</span></yt-formatted-string>
    </h1>

  <div class="cbTitleButtonContainer" style="height: 26px;"><button class="cbSubmitButton cbButton" draggable="false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M14.1 7.1l2.9 2.9L6.1 20.7l-3.6.7.7-3.6L14.1 7.1zm0-2.8L1.4 16.9 0 24l7.1-1.4L19.8 9.9l-5.7-5.7zm7.1 4.3L24 5.7 18.3 0l-2.8 2.8 5.7 5.7z"></path>
</svg></button></div></div>

it sounds like its about the font possibly? If that helps i am using an userscript to restore youtube's old ui, not sure if that is related by any chance though https://greasyfork.org/en/scripts/440613-youtube-proper-description

[matthijs110]

My bad about Opera not being Chromium.

As far as I can see the extention does exactly what it should: apply the icon font as main font and append the original fonts (e.g. 'Youtube Sans' as fallback).

There is a good chance that the userscript you mentioned is conflicting. In that case, I cannot help you unfortunately.

[matthijs110]

Hi @Roki100, A new version of the extension (version 2.0.0) is on its way! This should (hopefuly) also fix the issue you encountered.

[Roki100]

good news! 👀 thanks!