attractions icon indicating copy to clipboard operation
attractions copied to clipboard

Published 20 hours ago • verified publisher icon illright

Font is missing

Open Tauka opened this issue 3 years ago • 7 comments

For the correct font-family to work, I put Ubuntu font from Google fonts in <head></head>. However, I don't see it being documented anywhere. Is font supposed to be shipped with library?

Tauka avatar Feb 05 '22 06:02 Tauka

It's not supposed to be shipped with the library. I agree that not having an explicit mention in the docs is a bit of a miss. We'll add that shortly. Thanks for the heads up!

illright avatar Feb 05 '22 06:02 illright

Thank you for great UI library :)

Tauka avatar Feb 05 '22 06:02 Tauka

You're welcome :)

I'll keep the issue open for now to act as a reminder

illright avatar Feb 05 '22 06:02 illright

Guess I'm stuck here now. I added this to static/css/theme.scss

`@forward '~attractions/_variables' with ( $main: red, //only here for testing, it works $font: "'Ubuntu-Medium', sans-serif", );

@font-face { font-family: sans-serif; src: url('../fonts/Ubuntu/Ubuntu-Medium.ttf') format('ttf'); }`

I can't make the font to load up. Whats the deal?

zachsa999 avatar Sep 17 '22 21:09 zachsa999

I imagine you need to specify the name for your font face. See the MDN docs on @font-face

illright avatar Sep 18 '22 13:09 illright

I added

@forward '~attractions/_variables' with ($main: rgb(128, 66, 76),
    $font: "'Ubuntu', sans-serif",
);

@font-face {
    font-family: 'Ubuntu', sans-serif;
    // src: url('../fonts/Ubuntu/Ubuntu-Medium.ttf') format('ttf');
    src: url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
}

to my theme file, unfortunately no go. It does indeed work in the individual elementsas tested in a +page.svelte

in node_modules/attractions/_variables.scss line three declares $font to be Ubuntu

@use 'sass:color';

$font: 'Ubuntu', sans-serif !default;

$main: #4300b0 !default;

I can just declare the font for each element, but that excludea H1 etc. How do I go about this?

zachsa999 avatar Sep 18 '22 23:09 zachsa999

This is a different problem, off-topic to this issue that you're commenting on. Could you please open a new issue?

illright avatar Sep 19 '22 09:09 illright