CODEWITHSUNDEEP
polymer-1.0
Bob Arlof
Bob Arlof

Reputation: 990

How to change font of Polymer Paper component

I'm trying to learn how to use Google's Polymer 1.0 components by starting with a simple message dialog. The dialog appears, but it does not have the styling I see in Google's Polymer demos, so I'm trying to add style to the dialog to match what I see in the Google demos:

<html>
<head>
    <script src="scripts/polymer/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="scripts/polymer/paper-dialog/paper-dialog.html">
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

    <style type="text/css">
        paper-dialog {
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
            margin: 0;
            padding: 24px;
        }
    </style>
</head>
<body>

<paper-dialog opened="true">Dialog test</paper-dialog>

</body>
</html>

The padding value works fine, but the font family and font size are being ignored. I know the font is being downloaded ok because the "Test dialog" text briefly appears at the top of the page using the Roboto font just before the dialog appears. There are no errors in the console.

What is the proper way to get the dialog to accept the style I want? Note that I can wrap the dialog content with div that is styled with the desired font, but I doubt that's considered the proper way to do this in Polymer.

Upvotes: 2

Views: 2872

Answers (3)

ajaybc
ajaybc

Reputation: 4059

You could add <link rel="import" href="scripts/polymer/paper-styles/typography.html"> to get the default typography and fonts from the polymer project instead of explicitly specifying the font as Roboto as you did in your question.

Upvotes: 1

whitefang3456
whitefang3456

Reputation: 1

<Paper-dialog> doesn't comes with text styling property. The default font-family set as Roboto. You may check more from here https://elements.polymer-project.org/elements/paper-dialog-behavior?active=Polymer.PaperDialogBehavior

What i would recommend for yours is to create a <div> container that wraps the text with custom classes. I have tried similar outputs of yours in code.io here so you could see how the custom styling works.

Hope helps.

Upvotes: 0

Joe Germuska
Joe Germuska

Reputation: 1688

You may need to import paper-styles-classes.html

Based on your example, try adding

<link rel="import" href="scripts/polymer/paper-styles/paper-styles-classes.html">

or look for a similar file.

Upvotes: 1

Related Questions