Using @font-face to implement custom fonts multiple times in web page

Question

I am using @font-face to use custom fonts like this

 @font-face {
  font-family: 'Simpletext';
  src: url('MYRIADPRO-REGULAR.woff') format('woff'); 
}

now when i want to use this i am doing like this

<p style="font-family:Simpletext ;">Lorem Ipsum is simply dummy text </p>
<span style="font-family:Simpletext ;">Lorem Ipsum is simply dummy text</span>

Now instead of repeating this will someone guide me how can i define it just like a class rule and reuse it like this

 <p class="Simpletext"></p>

Julian F. Weinert · Accepted Answer · 2014-06-19 21:10:23Z

2

This is regular CSS. Please check a tutorial or similar. This does not apply to @font-face

<style>
    .your-class {
        font-family:"Simpletext";
    }
</style>
<p class="your-class">Lorem Ipsum is simply dummy text </p>
<span class="your-class">Lorem Ipsum is simply dummy text</span>

answered Jun 19, 2014 at 21:10

Julian F. Weinert

7,5808 gold badges67 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sikander Over a year ago

and if there is already a class implemneted like this <ul class="nav" > so how can i implement second class so same nav ?

Jukka K. Korpela Over a year ago

@Sikander, that’s a different question and should be asked separately, with due facts disclosed, if it is really a problem. You don’t “implement” classes, you just write CSS rules that refer to classes. There is no obvious reason why rules for one class would affect rules for another class, so you would have to explain what the problem really is.

Sikander Over a year ago

@JukkaK.Korpela i am using bootstrap and used <ul class="nav" > now when i want to apply custom bold font class to same ul how will i do it thats the problem . i did not know how to do that wnhen julian told me now i have to implement it in ul that is already imolementing nav class

Jukka K. Korpela Over a year ago

@Sikander, as I wrote, that’s a different problem, but it seems to be a rather trivial one: just use <ul class="nav your-class">.

Julian F. Weinert Over a year ago

Or write CSS code like .nav { font-family:"Simpletext"; } !!

Collectives™ on Stack Overflow

Using @font-face to implement custom fonts multiple times in web page

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related